Changing data in a stylesheet after an event happens?

Question

Hello all,
sorry if my title doesn't make too much sense, but basically I have a slider that I want to change colors based on which major tick it is on.
I figure I could make 5 different css files, but that seems a bit much. 
I also thought about changing the style inline, but I have to set 3 labels, as well as all of the parts of my slider, so I think that would be annoying to have to do that within the listener I already have setu.
It would be nice if in the stylesheets we could conditional styles.
i.e.,
if(i == 1)
.text
-fx-fill: red;
If anyone has any better ideas I would appreciate it, or else I'll have to go with the 5 stylesheets(lame but w/e ).
Thanks as always,
~KZ

Answer 1

node.lookupAll(...) gives a list of nodes at or below node in the scene graph which match the provided css selector. I always feel it lacks some robustness: first there's the string binding for the selector, relying on the class or id having been set, and second it won't give the correct results until the scene has been rendered. This use case is perfect for it, though.
A style sheet is an external file (or other resource, potentially) containing style information, typically in css.
A style class is applied to a node in order to select it in css. In JavaFX, all controls automatically get a style class which is the "css-ized" version of the Java class name (Label gets label, TextField gets text-field, etc).
So in a style sheet, the rule
.text {
     -fx-fill: red ;
is applied to all nodes with style class "text" (which will include all instances of Text, by default).
This works fine for me:
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class StyleSlider extends Application {
    @Override
    public void start(Stage primaryStage) {
        final VBox root = new VBox(5);
        root.setPadding(new Insets(10));
        final Label label1 = new Label("Label 1");
        final Label label2 = new Label("Label 2");
        label1.getStyleClass().add("stylable-by-slider");
        label2.getStyleClass().add("stylable-by-slider");
        final Slider slider = new Slider();
        slider.setMax(5);
        final String[] colors = new String[] { "red", "orange", "yellow",
                "green", "blue", "purple" };
        slider.valueProperty().addListener(new ChangeListener<Number>() {
            @Override
            public void changed(ObservableValue<? extends Number> obs, Number oldValue, Number newValue) {
                for (Node node : root.lookupAll(".stylable-by-slider")) {
                    node.setStyle("-fx-text-fill: " + colors[newValue.intValue()] + ";");
        root.getChildren().addAll(label1, label2, slider);
        final Scene scene = new Scene(root, 300, 200);
        primaryStage.setScene(scene);
        primaryStage.show();
    public static void main(String[] args) {
        launch(args);
Another approach is to define all the styles in your stylesheet, and manipulate the style classes in the listener:
        label1.getStyleClass().add("slider-style0");
     label2.getStyleClass().add("slider-style0");
        slider.valueProperty().addListener(new ChangeListener<Number>() {
            @Override
            public void changed(ObservableValue<? extends Number> obs, Number oldValue, Number newValue) {
                for (Node node : root.lookupAll(".slider-style"+oldValue.intValue())) {
                    node.getStyleClass().remove("slider-style"+oldValue.intValue());
                    node.getStyleClass().add("slider-style"+newValue.intValue());
and then in your external css do
.text.slider-style0 {
     -fx-fill: red ;
.text.slider-style1 {
     -fx-fill: orange ;
/* etc */