Slider
Tags: java, programming, learning, beginners
Published: 2024-06-27 19:25:01

**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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ltp2w406ez6ol02emcb.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r19e2u7f9dscene5whmq.png)

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](https://dev.to/paulike/case-study-bouncing-ball-39cj) 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jbqqgtgg125g1kxj958.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umu09j9jsjbot0dw3pxc.png)

The **BallPane** class defined in [BallPane.java](https://dev.to/paulike/case-study-bouncing-ball-39cj) 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).