Javafx Slider 拇指

Question

Is there a way to display an integer on the slider thumb in javafx? Just curious because I am trying to make a clean UI and cannot find anything on displaying an integer on the slider thumb.

Answer 1

One way to address the requirement is by accessing the thumb node and include a Text/Label node. Please check the below demo for what i mean.

You can adjust the thumb padding and the text size for fine tuning.

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class SliderTextDemo extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        Slider slider = new Slider(1, 10, 3);
        slider.setShowTickMarks(true);
        slider.setShowTickLabels(true);
        slider.setMajorTickUnit(1f);
        slider.setBlockIncrement(1f);
        slider.setSnapToTicks(true);

        Text text = new Text();
        slider.skinProperty().addListener((obs,old,skin)->{
            if(skin!=null){
                StackPane thumb = (StackPane)slider.lookup(".thumb");
                thumb.setPadding(new Insets(10));
                thumb.getChildren().add(text);
            }
        });
        slider.valueProperty().addListener((obs,old,val)->text.setText(val.intValue()+""));
        slider.setValue(2);

        VBox root = new VBox(slider);
        root.setAlignment(Pos.CENTER);
        root.setPadding(new Insets(20));
        root.setSpacing(20);
        Scene scene = new Scene(root,600,200);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Slider Text Demo");
        primaryStage.show();
    }
}

UPDATE:

If you don't want to rely on accessing the skin,you can indeed implement/initialize the Slider as below. That way you can create a custom Slider and can reuse in multiple places.

Slider slider = new Slider(1, 10, 3) {
    Text text;

    @Override
    protected void layoutChildren() {
        super.layoutChildren();
        if (text == null) {
            text = new Text(((int) getValue()) + "");
            valueProperty().addListener((obs, old, val) -> text.setText(val.intValue() + ""));
            StackPane thumb = (StackPane) lookup(".thumb");
            thumb.setPadding(new Insets(10));
            thumb.getChildren().add(text);
        }
    }
};