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

          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