Slider

Slider is similar to ScrollBar, but Slider has more properties and can appear in many forms.

Figure below shows two sliders. Slider lets the user graphically select a value by sliding a knob within a bounded interval. The slider can show both major tick marks and minor tick marks between them. The number of pixels between the tick marks is specified by the majorTickUnit and minorTickUnit properties. Sliders can be displayed horizontally or vertically, with or without ticks, and with or without labels.

The frequently used constructors and properties in Slider are shown in Figure below.

The values of a vertical scroll bar increase from top to bottom, but the values of a vertical slider decrease from top to bottom.

You can add a listener to listen for the value property change in a slider in the same way as in a scroll bar. We now rewrite the program in the preceding section using the sliders to move a text displayed on a pane in the code below.

package application;
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.text.Text;

public class SliderDemo extends Application {
    @Override // Override the start method in the Application class
    public void start(Stage primaryStage) {
        Text text = new Text(20, 20, "JavaFX Programming");

        Slider slHorizontal = new Slider();
        slHorizontal.setShowTickLabels(true);
        slHorizontal.setShowTickMarks(true);

        Slider slVertical = new Slider();
        slVertical.setOrientation(Orientation.VERTICAL);
        slVertical.setShowTickLabels(true);
        slVertical.setShowTickMarks(true);
        slVertical.setValue(100);

        // Create a text in a pane
        Pane paneForText = new Pane();
        paneForText.getChildren().add(text);

        // Create a border pane to hold text and scroll bars
        BorderPane pane = new BorderPane();
        pane.setCenter(paneForText);
        pane.setBottom(slHorizontal);
        pane.setRight(slVertical);

        slHorizontal.valueProperty().addListener(ov -> text.setX(slHorizontal.getValue() * paneForText.getWidth() / slHorizontal.getMax()));

        slVertical.valueProperty().addListener(ov -> text.setY((slVertical.getMax() - slVertical.getValue()) * paneForText.getHeight() / slVertical.getMax()));

        // Create a scene and place it in the stage
        Scene scene = new Scene(pane, 450, 170);
        primaryStage.setTitle("SliderDemo"); // Set the stage title
        primaryStage.setScene(scene); // Place the scene in the stage
        primaryStage.show(); // Display the stage
    }

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

Slider is similar to ScrollBar but has more features. As shown in this example, you can specify labels, major ticks, and minor ticks on a Slider (lines 17–18).

A listener is registered to listen for the slHorizontal value property change (lines 36) and another one is for the sbVertical value property change (lines 38). When the value of the slider changes, the listener is notified by invoking the handler to set a new position for the text (lines 36, 38). Note that since the value of a vertical slider decreases from top to bottom, the corresponding y value for the text is adjusted accordingly.

The code in lines 36–38 can be replaced by using binding properties as follows:

text.xProperty().bind(slHorizontal.valueProperty().
multiply(paneForText.widthProperty()).
divide(slHorizontal.maxProperty()));
text.yProperty().bind((slVertical.maxProperty().subtract(
slVertical.valueProperty()).multiply(
paneForText.heightProperty().divide(
slVertical.maxProperty()))));

BallPane.java gives a program that displays a bouncing ball. You can add a slider to control the speed of the ball movement as shown in Figure below. The new program is given in the code below.

The BallPane class defined in BallPane.java animates a ball bouncing in a pane. The rateProperty() method in BallPane returns a property value for animation rate. The animation stops if the rate is 0. If the rate is greater than 20, the animation will be too fast. So, we purposely set the rate to a value between 0 and 20. This value is bound to the slider value (line 14). So the slider max value is set to 20 (line 13).