javajavafxsliderjavafx-8

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?


The kind of Slider I would want to use:

enter image description here

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


Solution

  • 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();
        }
    }
    

    enter image description here

    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

    enter image description here