JavaFX | Using JavaFX UI Controls

Slider

The Slider presents a control to display and interact with a range of numeric values. The control consists of a track and a draggable thumb. It also can be represented visually by tick marks and tick labels to indicate numeric values of the range. The sliders typically are accompanied by labels to prompt the type of values to interact with.

A slider with tick marks and labels

Take a moment to review the code fragment that produces this slider. The slider and the label description are allocated within an HBox container.

Source Code

import javafx.scene.layout.HBox;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;

HBox {
    spacing: 10
    content: [
        Label {text: "Completion:"},
        Slider {
            min: 0
            max: 100
            value: 60
            showTickMarks: true
            showTickLabels: true
            majorTickUnit: 50
            minorTickCount: 5
            blockIncrement: 10
            labelFormatter: function (num) {"{%(,.0f num}%"}
        }
     ]
}

The min and max instance variables define, accordingly, the minimum and the maximum numeric values represented by the slider. The value variable defines the current value of the slider, which is always less than the max value and more than min value. You can also use the value instance variable to set a particular value and, consequently, define the position of the thumb when the application starts.

The value of the slider can be changed either by dragging the thumb or by clicking the track. While dragging the thumb changes the value variable gradually, clicking the track changes it discretely. The blockIncrement instance variable defines the amount of the value change if the track is clicked. This variable is used if clickToPosition is set to false. By default, the clickToPosition is false and the blockIncrement variable is applied.

Two Boolean variables, showTickMarks and showTickLabels, define the visual appearance of the slider. In the example shown, 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 10. You can set the snapToTicks variable of Slider to true to keep its value aligned with the tick marks.

The labelFormatter is yet another instance variable of the Slider class that represents a function to generate a label for the major ticks. The corresponding code line defines rendering only the integer part of the value followed by the percent sign.

Source Code

labelFormatter: function(num) { "{%(,.0f num}%" }

Now take a look at another application, where three sliders are used to edit an image. Each slider adjusts a particular visual characteristic: opacity level, sepia-tone value, or scaling factor.

Using sliders to edit images

Study the source code of the application.

Source Code

package slidersample;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.image.*;
import javafx.scene.paint.Color;
import javafx.scene.effect.SepiaTone;
import javafx.geometry.Insets;

def image = Image {url: "{__DIR__}cappuccino.jpg"};
var opacityLevel = Slider {min: 0 max: 1 value: 1};
var sepiaTone = Slider {min: 0 max: 1 value: 0};
var scaling = Slider {min: 0.5 max: 1 value: 1};
var sliders = [opacityLevel, sepiaTone, scaling];
def captions = ["Opacity Level:", "Sepia Tone:", "Scaling:"];

Stage {
    title: "Application title"
    scene: Scene {
        fill: Color.rgb(29, 29, 29, 1)
        content: [
            VBox {
                padding: Insets {top: 10 left: 10 bottom: 10 right: 10}
                spacing: 10
                content: [
                    ImageView {
                        image: image
                        opacity: bind opacityLevel.value
                        effect: SepiaTone {level: bind sepiaTone.value}
                        scaleX: bind scaling.value
                        scaleY: bind scaling.value
                    },
                    Tile {
                        hgap: 5
                        vgap: 10
                        rows: 3
                        columns: 3
                        vertical: true
                        content: [
                            for (caption in captions)
                                Label {
                                    text: caption
                                    textFill: Color.rgb(200, 200, 200, 1.0)
                                }
                            sliders,
                            for (slider in sliders)
                                Label {
                                    text: bind "{%(,.1f slider.value}"
                                    textFill: Color.rgb(100, 100, 100, 1.0)
                                }
                        ]
                    }
                ]
            }
        ]
    }
}

The opacity instance variable of the ImageView object is bound to the value of the first slider, named opacityLevel. The level of the SepiaTone effect is bound to the value of the second slider, named sepiaTone. Note that visual effects from the javafx.scene.effect package, such as SepiaTone, are available only in the desktop profile, so this application cannot run on the mobile emulator. And the third slider defines the scaling factor for the image by binding the scaleX and scaleY variables of the ImageView object to the slider's value. Three labels render the current value of the corresponding sliders in the format of a float number with one digit after the point.

The next step to enhance the look and feel of a slider is to apply CSS styles to it (see Applying CSS to UI Controls).

Slider

Related Documents

Samples That Use Sliders