javacssjavafxcontrolsfx

Java ControlsFX RangeSlider CSS issue

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:

RangeSlider CSS issue

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.

Solution

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

    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.

    working slider