Make a label update while dragging a slider

Question

I'm using a Slider in my javaFX project and I have a Label that updates when I move the slider.

I want the Label to update whilst I'm dragging the Slider and not only when the drag is dropped.

This is my code:

 betSlider.valueChangingProperty().addListener(new ChangeListener<Boolean>() {
            @Override
            public void changed(ObservableValue<? extends Boolean> source, Boolean oldValue, Boolean newValue) {
                betLabel.textProperty().setValue(String.valueOf((int)betSlider.getValue()));
  } });

Answer 1

You just need to change the valueChangingProperty() to valueProperty() and TADA, it works as you want !

A small sample is attached here :

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Demo extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Add a scene
        VBox root = new VBox();
        Scene scene = new Scene(root, 500, 200);

        final Label betLabel = new Label("sdsd");

        final Slider betSlider = new Slider();
        betSlider.valueProperty().addListener(new ChangeListener<Number>() {

                @Override
                public void changed(
                   ObservableValue<? extends Number> observableValue, 
                   Number oldValue, 
                   Number newValue) { 
                      betLabel.textProperty().setValue(
                           String.valueOf(newValue.intValue());
                  }
            }
        });

        root.getChildren().addAll(betSlider, betLabel);
        betLabel.textProperty().setValue("abc");

        // show the stage
        primaryStage.setTitle("Demo");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

Answer 2

Bind the label's textProperty to the slider's valueProperty.

A format conversion is required in the binding to make it work.

Either Itachi's valueProperty() ChangeListener or a binding will work.

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Slide extends Application {
    @Override public void start(Stage stage) {   
        Label  label  = new Label();
        Slider slider = new Slider(1, 11, 5);

        label.textProperty().bind(
            Bindings.format(
                "%.2f",
                slider.valueProperty()
            )
        );

        VBox layout = new VBox(10, label, slider);
        layout.setStyle("-fx-padding: 10px; -fx-alignment: baseline-right");

        stage.setScene(new Scene(layout));
        stage.setTitle("Goes to");
        stage.show();
    }

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

Answer 3

And if you want to do completely in in FXML, you can do this:

<TextField prefWidth="50" text="${speedSlider.value}"/>
<Slider fx:id="speedSlider" orientation="HORIZONTAL" prefWidth="300"
        min="60" max="100000" blockIncrement="100"/>

Answer 4

Adding an alternative that seems simpler and easier to me:

Given a slider named slMySlider and a label named lblMySlider

1. Add a MouseEvent.MOUSE_DRAGGED event handler to the slider and have it call a helper method:

slMySlider.addEventHandler(MouseEvent.MOUSE_DRAGGED, this::changeLabelHandler);

2. Have the helper method change the label's text:

private void changeLabelHandler(MouseEvent e) {
        lblMySlider.setText("Value: " + String.format("%1.2f", slMySlider.getValue()));
    }

Answer 5

slider.valueProperty().addListener((observable, oldValue, newValue) ->
label.setText("sliderNameLabel: " + newValue));

Answer 6

If you have a slider in JavaFX 8, you could do this:

slider().addListener(e -> {
    // Your code here could be anything.
});