JavaFX Slider change width (thickness)

Question

My problem is that the default Slider is too thin. Is there a way to make the Slider (width) bigger?

Thanks for advice.

Answer 1

In JavaFX most of the styling can be done via CSS.

You can use the .slider .track and the .slider .thumb style classes in your CSS file. In this style classes you can use the -fx-pref-width and -fx-pref-height attributes:

.slider .track {
    -fx-pref-height:20;
}

.slider:vertical .track {
    -fx-pref-width:20;
}

.slider .thumb {
    -fx-pref-height: 30;
    -fx-pref-width: 30;
}

Or alternatively you can use the -fx-padding attribute:

.slider .track {
    -fx-padding: 10;
}

.slider .thumb {
    -fx-padding: 15;
}

This will produce horizontal and vertical Sliders like these:

In any case, you can refer to the JavaFX 8 default stylesheet (modena.css) and the JavaFX CSS Reference Guide.

You can also use the official tutorial about styling JavaFX with CSS.

Answer 2

Because I spent way to much time researching a similar problem, here is how you get rid of the track and it's "clickability":

CSS:
.slider .track {
    visibility: hidden;
}

// You'll probably want this in the code also to swallow all keyboard events:

slider.addEventFilter(KeyEvent.ANY, new EventHandler<KeyEvent>() {
    @Override
    public void handle(KeyEvent event) {
        System.out.println("KeyEvent NO!");
        event.consume();
    }
});