18 Slider
In this chapter, you learn how to use sliders in your JavaFX applications to display and interact with a range of numeric values.
The Slider control consists of a track and a draggable thumb. It can also include tick marks and tick labels that indicate numeric values of the range. Figure 18-1 shows a typical slider and indicates its main elements.
Creating a Slider
Take a moment to review the code fragment in Example 18-1 that produces a slider shown in Figure 18-1.
Example 18-1 Creating a Slider
Slider slider = new Slider(); slider.setMin(0); slider.setMax(100); slider.setValue(40); slider.setShowTickLabels(true); slider.setShowTickMarks(true); slider.setMajorTickUnit(50); slider.setMinorTickCount(5); slider.setBlockIncrement(10);
The setMin and setMax methods define, respectively, the minimum and the maximum numeric values represented by the slider. The setValue method specifies the current value of the slider, which is always less than the maximum value and more than the minimum value. Use this method to define the position of the thumb when the application starts.
Two Boolean methods, setShowTickMarks and setShowTickLabels, define the visual appearance of the slider. In Example 18-1, the marks and labels are enabled. Additionally, the unit distance between major tick marks is set to 50, and the number of minor ticks between any two major ticks is specified as 5. You can assign the setSnapToTicks method to true to keep the slider's value aligned with the tick marks.
The setBlockIncrement method defines the distance that the thumb moves when a user clicks on the track. In Example 18-1, this value is 10, which means that each time a user clicks on the track, the thumb moves 10 units toward the click location.
Using Sliders in Graphical Applications
Now examine Figure 18-2. This application uses three sliders to edit rendering characteristics of a picture. Each slider adjusts a particular visual characteristic: opacity level, sepia tone value, or scaling factor.
Example 18-2 shows the source code of this application.
Example 18-2 Slider Sample
import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.effect.SepiaTone;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class SliderSample extends Application {
final Slider opacityLevel = new Slider(0, 1, 1);
final Slider sepiaTone = new Slider(0, 1, 1);
final Slider scaling = new Slider (0.5, 1, 1);
final Image image = new Image(getClass().getResourceAsStream(
"cappuccino.jpg")
);
final Label opacityCaption = new Label("Opacity Level:");
final Label sepiaCaption = new Label("Sepia Tone:");
final Label scalingCaption = new Label("Scaling Factor:");
final Label opacityValue = new Label(
Double.toString(opacityLevel.getValue()));
final Label sepiaValue = new Label(
Double.toString(sepiaTone.getValue()));
final Label scalingValue = new Label(
Double.toString(scaling.getValue()));
final static Color textColor = Color.BLACK;
final static SepiaTone sepiaEffect = new SepiaTone();
@Override
public void start(Stage stage) {
Group root = new Group();
Scene scene = new Scene(root, 600, 400);
stage.setScene(scene);
stage.setTitle("Slider Sample");
GridPane grid = new GridPane();
grid.setPadding(new Insets(10, 10, 10, 10));
grid.setVgap(10);
grid.setHgap(70);
final ImageView cappuccino = new ImageView (image);
cappuccino.setEffect(sepiaEffect);
GridPane.setConstraints(cappuccino, 0, 0);
GridPane.setColumnSpan(cappuccino, 3);
grid.getChildren().add(cappuccino);
scene.setRoot(grid);
opacityCaption.setTextFill(textColor);
GridPane.setConstraints(opacityCaption, 0, 1);
grid.getChildren().add(opacityCaption);
opacityLevel.valueProperty().addListener((
ObservableValue<? extends Number> ov,
Number old_val, Number new_val) -> {
cappuccino.setOpacity(new_val.doubleValue());
opacityValue.setText(String.format("%.2f", new_val));
});
GridPane.setConstraints(opacityLevel, 1, 1);
grid.getChildren().add(opacityLevel);
opacityValue.setTextFill(textColor);
GridPane.setConstraints(opacityValue, 2, 1);
grid.getChildren().add(opacityValue);
sepiaCaption.setTextFill(textColor);
GridPane.setConstraints(sepiaCaption, 0, 2);
grid.getChildren().add(sepiaCaption);
sepiaTone.valueProperty().addListener((
ObservableValue<? extends Number> ov, Number old_val,
Number new_val) -> {
sepiaEffect.setLevel(new_val.doubleValue());
sepiaValue.setText(String.format("%.2f", new_val));
});
GridPane.setConstraints(sepiaTone, 1, 2);
grid.getChildren().add(sepiaTone);
sepiaValue.setTextFill(textColor);
GridPane.setConstraints(sepiaValue, 2, 2);
grid.getChildren().add(sepiaValue);
scalingCaption.setTextFill(textColor);
GridPane.setConstraints(scalingCaption, 0, 3);
grid.getChildren().add(scalingCaption);
scaling.valueProperty().addListener((
ObservableValue<? extends Number> ov, Number old_val,
Number new_val) -> {
cappuccino.setScaleX(new_val.doubleValue());
cappuccino.setScaleY(new_val.doubleValue());
scalingValue.setText(String.format("%.2f", new_val));
});
GridPane.setConstraints(scaling, 1, 3);
grid.getChildren().add(scaling);
scalingValue.setTextFill(textColor);
GridPane.setConstraints(scalingValue, 2, 3);
grid.getChildren().add(scalingValue);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
The opacity property of the ImageView object changes in accordance with the value of the first slider, named opacityLevel. The level of the SepiaTone effect changes when the value of the sepiaTone slider changes. The third slider defines the scaling factor for the picture by passing to the setScaleX and setScaleY methods the current value of the slider.
The code fragment in Example 18-3 demonstrates the methods that convert the double value returned by the getValue method of the Slider class into String. It also applies formatting to render the slider's value as a float number with two digits after the point.
Example 18-3 Formatting the Rendered Slider's Value
scalingValue.setText(String.format("%.2f", new_val));
The next step to enhance the look and feel of a slider is to apply visual effects or CSS styles to it.
Related API Documentation
