Search code examples
cssjavafxcontrolsfxjavafx-css

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

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

enter image description here any help much appreciated

Solution

  • 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.