Download Source Code

Profiles

Alla Redko

Technical Writer, Oracle

Alla is a technical writer for Oracle. She lives in St. Petersburg, Russia, and develops tutorials and technical articles for Java and JavaFX technologies. Prior to her assignment at Oracle, she worked as a technical writer in different IT companies.

We Welcome Your Comments

Using JavaFX UI Controls

16 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 16-1 shows a typical slider and indicates its main elements.

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 16-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 16-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.

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 16-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 16-3 Formatting the Rendered Slider's Value

scalingValue.setText((Double.toString(value)).format("%.2f", value));

The next step to enhance the look and feel of a slider is to apply visual effects or CSS styles to it.