JavaFX ControlsFX CSS for RangeSlider

Question

I have just downloaded the JavaFX ControlsFX library and am currently stuck. I'm using one of the custom components in the library, called a RangeSlider, but need to manipulate style for each thumb in CSS. I've looked all over the place but can't seem to find anything useful. Is there a way to do that? I know with regular java Slider components, this can be done:

.slider .thumb {
     // Style code here
 }

But when I use something like this for RangeSlider, nothing works. It makes sense because there's 2 sliders, but I've tried 100 combinations for what the substructure names would be to no avail.

Mission: I'm trying to change each thumbs icon and I'm also interested in changing the color that is drawn in between the 2 thumbs(currently blue).

Hopefully this is something wildly obvious, thank you!

Answer 1

The default style class for a RangeSlider is range-slider. You can find all the style rules in the rangeslider.css file (on the controlsfx.jar) or on the repository.

If you want to change the thumbs, those are StackPane objects, you can use -fx-shape:

.range-slider .low-thumb {
    -fx-shape: "M2.998-0.07L3-1.499l2.998,4L3,6.501l-0.002-1.43l1.976-2.57L2.998-0.07z";
}
.range-slider .high-thumb {
    -fx-shape: "M5.997,5.072L5.995,6.501l-2.998-4l2.998-4l0.002,1.43l-1.976,2.57L5.997,5.072z";
}

This will change the range bar color:

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