How could I make a slider like this? Could this even be executed as a slider, or do I need another kind of node for this?

Question

The kind of Slider I would want to use:

Is this possible or do I need another kind of Node to execute this? Is this even possible in JavaFX?

I haven't tried anything yet, but it's kind of hard to find information about customizing sliders

Answer 1

A control that has buttons to increment or decrement a value is a Spinner. The CSS documentation shows how to modify the position of the increment and decrement buttons.

Here is a quick demo:

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Spinner;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class SpinnerDemo extends Application {
    @Override
    public void start(Stage stage) {
        Spinner<Integer> spinner = new Spinner<>(1, 10, 1);
        spinner.getStyleClass().add("split-arrows-horizontal");
        spinner.valueProperty().addListener((obs, oldValue, newValue) -> System.out.println("Song "+newValue+" selected"));
        spinner.setEditable(false);

        VBox controls = new VBox(5, spinner, new Label("Select Song"));
        controls.setAlignment(Pos.CENTER);

        Scene scene = new Scene(controls, 400 ,400);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

Further styling can be achieved in the usual way with CSS. For example, applying this stylesheet

.spinner.split-arrows-horizontal .text-field {
    -fx-pref-column-count: 5;
}

.spinner,
.spinner .text-field,
.spinner .increment-arrow-button,
.spinner .decrement-arrow-button {
    -fx-background-color: -fx-background;
}


.spinner .increment-arrow-button:hover,
.spinner .decrement-arrow-button:hover {
    -fx-background-color: derive(-fx-background, -3%);
}

.spinner .increment-arrow-button:pressed,
.spinner .decrement-arrow-button:pressed {
    -fx-background: -fx-pressed-base;
}

results in