Java ControlsFX RangeSlider CSS issue

Question

I have a issue styling the thumbs of the RangeSlider - the track gets a wrong color:

Consider this example:

package org.example;

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import org.controlsfx.control.RangeSlider;

public class App extends Application {

    @Override
    public void start(Stage stage) {

        RangeSlider rangeSliderTest = new RangeSlider();
        rangeSliderTest.setOrientation(Orientation.VERTICAL);

        HBox hBoxWithRangeSlider = new HBox();
        hBoxWithRangeSlider.setId("hBoxWithRangeSlider");
        hBoxWithRangeSlider.getChildren().add(rangeSliderTest);

        var scene = new Scene(new StackPane(hBoxWithRangeSlider), 200, 400);
        scene.getStylesheets().add("_1_styles.css");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {

        launch();

    }

}

And this CSS to style it:

.root{
  -fx-focus-color:#00a8ff;
}

.range-slider .low-thumb {
  -fx-pref-height: 10;
  -fx-pref-width: 20;
}

.range-slider .high-thumb {
  -fx-pref-height: 10;
  -fx-pref-width: 20;
}

#hBoxWithRangeSlider{
  -fx-padding: 20 20 20 20;
  -fx-alignment: center;
}

It will give this:

As you can see there is a issue with the high-thumb, the track is white, it should be blue. It is strange, because if I remove all the high-thumb styling from the .css, then the high-thumb will still be styled.

EDIT: Issue is only present when Orientation.VERTICALis used.

Answer 1

It is a bug in ControlsFX 11.0.2.

You might want to file an issue on the project, or create a pull request for it. You can link back to this answer if you do.

The skin calculates the range-bar (the inner blue section of the track) length incorrectly for a vertically oriented range slider which has different height/width dimensions for the thumbs.

The error is in this line of the skin code:

if (orientation) rangeEnd = x; else rangeStart = y + thumbWidth;

It should use the thumbHeight for the rangeStart calculation when the orientation is vertical:

if (orientation) rangeEnd = x; else rangeStart = y + thumbHeight;

You can patch your local version to fix the bug until the bug in the underlying library is fixed.

• Copy the ControlsFX RangeSliderSkin and ImplUtils code into your project, renaming the skin and package.
• Modify the skin code to fix the bug.
• Configure your code to use your own implementation of the skin.

Example usage code for a custom (fixed) skin named MyRangeSliderSkin.

RangeSlider rangeSliderTest = new RangeSlider();
rangeSliderTest.setSkin(new MyRangeSliderSkin(rangeSliderTest));
rangeSliderTest.setOrientation(Orientation.VERTICAL);

Once you do that, you get the desired result.