JavaFX Slider Example

In this JavaFX source code example, we will see how to use the JavaFX Slider control with an example.

Slider is a control that lets the user graphically select a value by sliding a knob within a bounded interval. The slider can optionally show tick marks and labels indicating different slider position values.

JavaFX Slider Example

In the code example, we show a Slider and an ImageView control. By dragging the knob of the slider, we change the image on the label control.
package sample; import javafx.application.Application; import javafx.beans.value.ChangeListener; import javafx.beans.value.ObservableValue; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Slider; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.HBox; import javafx.stage.Stage; public class Main extends Application { private ImageView iview; private Image muteImg; private Image minImg; private Image maxImg; private Image medImg; @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { var root = new HBox(50); root.setAlignment(Pos.CENTER); root.setPadding(new Insets(15)); loadImages(); iview = new ImageView(muteImg); var slider = new Slider(0, 100, 0); slider.valueProperty().addListener(new MyChangeListener()); var scene = new Scene(root); root.getChildren().addAll(slider, iview); stage.setTitle("Slider"); stage.setScene(scene); stage.show(); } private void loadImages() { muteImg = new Image("file:mute.png"); minImg = new Image("file:min.png"); maxImg = new Image("file:max.png"); medImg = new Image("file:med.png"); } private class MyChangeListener implements ChangeListener<Number> { @Override public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) { double value = newValue.doubleValue(); if (value == 0) { iview.setImage(muteImg); } else if (value > 0 && value <= 30) { iview.setImage(minImg); } else if (value > 30 && value < 80) { iview.setImage(medImg); } else { iview.setImage(maxImg); } } } public static void main(String[] args) { launch(args); } }
Output:


Comments