JavaFX 2.2: Hooking Slider Drag n Drop Events

Question

I am trying to catch the events on the JavaFX Slider especially the one which indicates that the drag stopped and was released. At first I used the valueProperty with mock-up code like this

slider.valueProperty().addListener(new ChangeListener<Number>() {
    @Override
    public void changed(ObservableValue<? extends Number> ov, Number oldValue, Number newValue) {
        log.fine(newValue.toString());
    }
});

but with this it update too often. So I searched within SceneBuilder and the API and found some interessting like

slider.setOnMouseDragReleased(new EventHandler<MouseDragEvent>() {
    @Override
    public void handle(MouseDragEvent event) {
        System.out.println("setOnMouseDragReleased");
    }
});

but they never get fired. There only some like setOnMouseReleased I get some output, but this for example count for the whole Node like the labels etc.

So my question is, which is the correct hook to know the value is not changing anymore (if possible after release of the mouse like drag'n'drop gesture) and maybe with a small example to see its interfaces working.

score 10 · Accepted Answer · answered Sep 19 '13 at 17:40

Add a change listener to the slider's valueChangingProperty to know when the slider's value is changing, and take whatever action you want on the value change.

The sample below will log the slider's value when it starts to change and again when it finishes changing.

slidervaluechangelogger

import javafx.application.Application;
import javafx.beans.value.*;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class SliderChangeLog extends Application {
    private final ListView<String> startLog = new ListView<>();
    private final ListView<String> endLog   = new ListView<>();

    @Override public void start(Stage stage) throws Exception {
        Pane logsPane = createLogsPane();
        Slider slider = createMonitoredSlider();

        VBox layout = new VBox(10);
        layout.setAlignment(Pos.CENTER);
        layout.setPadding(new Insets(10));
        layout.getChildren().setAll(
                slider,
                logsPane
        );
        VBox.setVgrow(logsPane, Priority.ALWAYS);

        stage.setTitle("Slider Value Change Logger");
        stage.setScene(new Scene(layout));
        stage.show();
    }

    private Slider createMonitoredSlider() {
        final Slider slider = new Slider(0, 1, 0.5);
        slider.setMajorTickUnit(0.5);
        slider.setMinorTickCount(0);
        slider.setShowTickMarks(true);
        slider.setShowTickLabels(true);
        slider.setMinHeight(Slider.USE_PREF_SIZE);

        slider.valueChangingProperty().addListener(new ChangeListener<Boolean>() {
            @Override
            public void changed(
                    ObservableValue<? extends Boolean> observableValue,
                    Boolean wasChanging,
                    Boolean changing) {
                String valueString = String.format("%1$.3f", slider.getValue());

                if (changing) {
                    startLog.getItems().add(
                            valueString
                    );
                } else {
                    endLog.getItems().add(
                            valueString
                    );
                }
            }
        });
        return slider;
    }

    private HBox createLogsPane() {
        HBox logs = new HBox(10);
        logs.getChildren().addAll(
                createLabeledLog("Start", startLog),
                createLabeledLog("End",   endLog)
        );
        return logs;
    }

    public Pane createLabeledLog(String logName, ListView<String> log) {
        Label label = new Label(logName);
        label.setLabelFor(log);

        VBox logPane = new VBox(5);
        logPane.getChildren().setAll(
                label,
                log
        );

        logPane.setAlignment(Pos.TOP_LEFT);

        return logPane;
    }

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

Thank you, you helped me a great deal, take my first +1 :) Do you know by change how to change the Slider Tick Distances manually? like I want Ticks at 2 4 8 16 32 etc — thatsIch, Sep 19 '13 at 19:57
@thatsIch ask a new question regarding slider tick distances — jewelsea, Sep 19 '13 at 20:19
thatslch's new question was [Configuring Slider ticks manually](http://stackoverflow.com/questions/18904969/javafx-2-2-configuring-slider-ticks-manually). — jewelsea, Jan 13 '15 at 20:51
Great, that helped me too, thanks! But may I ask, what are the "setOnMouseDragReleased" events supposed to be useful for if not for, that? When do they fire? — DragonGamer, Jul 19 '16 at 13:04
setOnMouseDragReleased allows you to intercept an event when the user clicks the mouse, holds it down, moves it and later releases it. It is a relatively low level API for implementing a custom drag handler within your application. It is not necessary to use setOnMouseDragReleased in this case. An example usage could be for implementing a custom selection rectangle via a drag gesture in a painting app. In most cases the [drag and drop api](https://docs.oracle.com/javase/8/javafx/events-tutorial/drag-drop.htm#CHDJFJDH) would be used instead of the setOnMouseDragReleased method. — jewelsea, Jul 19 '16 at 17:52

score 2 · Answer 2 · answered Feb 10 '19 at 06:13

There could be times when you want to know when the user is moving the slider versus the slider value changing due to a binding to a property. One example is a slider that is used on a media player view to show the media timeline. The slider not only displays the time but also allows the user to fast forward or rewind. The slider is bound to the media player's current time which fires the change value on the slider. If the user moves the slider, you may want to detect the drag so as to stop the media player, have the media player seek to the new time and resume playing. Unfortunately the only drag event that seems to fire on the slider is the setOnDragDetected event. So I used the following two methods to check for a slider drag.

    slider.setOnDragDetected(new EventHandler<Event>() {
        @Override
        public void handle(Event event) {
            currentPlayer.pause();
            isDragged=true;     
        }
    });

slider.setOnMouseReleased(new EventHandler<Event>() {
        @Override
        public void handle(Event event) {
            if(isDragged){
                currentPlayer.seek(Duration.seconds((double) slider.getValue()));
                currentPlayer.play();
                isDragged=false;
            }       
        }
    });

score 0 · Answer 3 · answered Mar 06 '15 at 22:22

jewelsea's answer was very helpful for setting me on the right track, however if "snapToTicks" is on, undesired behavior results. The "end" value as captured by jewelsea's listener is before the snap takes place, and the post-snap value is never captured.

My solution sets a listener on value but uses valueChanging as a sentinel. Something like:

slider.valueProperty().addListener(new ChangeListener<Number>() {
        @Override
        public void changed(
                ObservableValue<? extends Number> observableValue,
                Number previous,
                Number now) {
            if (!slider.isValueChanging()
                  || now.doubleValue() == slider.getMax()
                  || now.doubleValue() == slider.getMin()) {
                // This only fires when we're done
                // or when the slider is dragged to its max/min.
            }
        }
    });

I found that checking for the max and min value was necessary to catch the corner case where the user drags the slider all the way past its left or right bounds before letting go of the mouse. For some reason, that doesn't fire an event like I'd expect, so this seems like an okay work-around.

Note: Unlike jewelsea, I'm ignoring the starting value for the sake of simplicity.

Note 2: I'm actually using ScalaFX 2, so I'm not sure if this Java translation compiles as-written.

JavaFX 2.2: Hooking Slider Drag n Drop Events

3 Answers3

Linked

Related