How to change the color of the inner slide in a RangeSlider (JavaFX)?

Question

I'm trying to change the css of the RangeSlider

I am using this maven dependency in integtare it in my FXML file

    <dependency>
        <groupId>org.controlsfx</groupId>
        <artifactId>controlsfx</artifactId>
        <version>8.40.12</version>
    </dependency

its id in the fxml file is :

<RangeSlider fx:id="rangeSlider"

I injected it in the controller with:

@FXML
private RangeSlider rangeSlider

then I set an Id to change its appearence with CSS :

@Override
public void initialize(URL url, ResourceBundle rb){

    rangeSlider.adjustHighValue(30);
    rangeSlider.setId("rangeSlider");
}

and in the CSS side :

#rangeSlider .thumb {
    -fx-background-color: #2196f3;
}

#rangeSlider .track{
    -fx-background-color: #151928;
}

I can't figure out how to change the inner blue color

any help much appreciated

score 2 · Accepted Answer · answered Aug 27 '18 at 16:24

The node responsible for the color between the thumbs is a StackPane with the style class range-bar. The -fx-background-color defaults to -fx-focus-color, but you could override this property:

#rangeSlider .range-bar {
    -fx-background-color: red;
}

If you want to take a look at the details, refer to the RangeSliderSkin.initRangeBar code and/or rangeslider.css.

How to change the color of the inner slide in a RangeSlider (JavaFX)?

1 Answers1