JavaFX: Slider

 

Slider Control is used to display a continuous or discrete range of valid numeric choices and allows the user to interact with the control. It is typically represented visually as having a "track" and a "knob" or "thumb" which is dragged within the track. The Slider can optionally show tick marks and labels indicating the different slider position values.

 

Creating slider using FXML

<Slider fx:id="slider"

          min="0" max="1" value = "0"

          showTickLabels="true"

          showTickMarks= "true"

          style="-fx-background-color:palegreen"

/>

 

Slider class provides following constructors to define Slider instance.

 

public Slider()

public Slider(double min, double max, double value)

min: Specifies slider minimum value

max: Specifiesa slider maximum value

value: Specifies slider current value

 

How to set minimum size of slider?

slider.setMinSize(400, 30);

 

How to set major tick unit?

slider.setMajorTickUnit(0.2);

 

How to set default slider value?

slider.setValue(0.5);

 

How to listen on slider property change?

slider.valueProperty().addListener((ObservableValue<? extends Number> ov, Number old_val, Number new_val) -> {

         ....

         .....

});

 

Find the below working application.

 

sliderDemo.fxml

<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.effect.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.paint.*?>

<VBox xmlns:fx="http://javafx.com/fxml" fx:controller="com.sample.app.widgets.controller.SliderDemoController"
	fx:id="vBox1"
	spacing="30">
	
	<padding>
		<Insets top="20" right="20" bottom="10" left = "30" />
	</padding>
	
	<effect>
	 	<DropShadow offsetX="3" offsetY="3">
	 		<color>
	 			<Color red="1" green="0" blue="0" opacity="0.7"/>
	 		</color>
	 	</DropShadow>
	 </effect>
	 
	 <HBox>
	 <Text fx:id = "text" text="Learning JavaFX"  fill="red"
		style="-fx-font-weight: bold; -fx-font-size: 50; -fx-font-family: Verdana; -fx-font-style: italic"
		stroke="darkblue" strokeWidth="2" 
		underline="true"
		opacity="0.3"/>
	 </HBox>
	
	<HBox>
	 	<Slider fx:id="slider"
	 		min="0" max="1" value = "0"
	 		showTickLabels="true"
	 		showTickMarks= "true" 
	 		style="-fx-background-color:palegreen"
	 		/>
	 </HBox>
	
</VBox>

 

SliderDemoController.java

package com.sample.app.widgets.controller;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.value.ObservableValue;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Slider;
import javafx.scene.text.Text;

public class SliderDemoController implements Initializable {

	@FXML
	private Text text;

	@FXML
	private Slider slider;

	@Override
	public void initialize(URL location, ResourceBundle resources) {
		slider.valueProperty().addListener((ObservableValue<? extends Number> ov, Number old_val, Number new_val) -> {
			text.setOpacity((Double) new_val);
		});

		
		slider.setMinSize(400, 30);
		slider.setMajorTickUnit(0.2);
		slider.setValue(0.5);
	}

}

 

SliderDemo.java

package com.sample.app.widgets;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class SliderDemo extends Application {

	private static final String FXML_FILE = "/sliderDemo.fxml";
	private static final String STAGE_TITLE = "Slider Demo";

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

	}

	@Override
	public void start(Stage primaryStage) throws Exception {

		Parent root = (Parent) FXMLLoader.load(this.getClass().getResource(FXML_FILE));

		Scene scene = new Scene(root, 600, 300, Color.WHITE);

		primaryStage.setTitle(STAGE_TITLE);
		primaryStage.setScene(scene);
		primaryStage.show();

	}

}

 

Output

 

When you move the slider to right side, you can observe text opacity get increased, left side decrease the text opacity.  

 

 

Previous                                                    Next                                                    Home