Skip to main content

Slider

Java API

Upper and lower limit​

Use the setMinimum() and setMaximum() methods to determine the upper and lower bound of the slider. Each interval on the slider has a distance of 1, meaning that a slider with maximum 10 and minimum of 0 will have 10 intervals on the slider, whereas a maximum of 100 and minimum of 0 will have 100 intervals. These intervals will evenly distribute on the slider, depending on the height and width dimensions that it has been given by the developer.

Show Code


Ticks and labeling​

Slider components can be customized to show ticks, or spaces bounded by lines to represent distances. Major ticks will be larger and more noticeable than minor ticks, and both can be configured to appear at the desired intervals. It is also possible to set the slider to snap to the tick values using the setSnapToTicks() method.

Show Code


It is also possible to set labels on a slider. These labs may or may not correspond with ticks that have been set. To set the labels, simply create a map with key value pairs, where the keys are the integer values to be labeled, and the values are the desired label string.

info

If tick snapping is enabled, the slider will only snap to ticked spaces specifically. If a non-ticked value has a label, it will not be snapped to by the slider.


Show Code


Orientation and inversion​

Sliders can be oriented either horizontally or vertically by using the setOrientation() method.

Show Code


It is also possible to invert a slider. By default, the minimum value of a vertical slider is at the bottom and the maximum value is at the top. For a horizontal slider, the minimum value is to the left and the maximum value is to the right. The orientation reverses for inverted sliders.

Show Code


Themes​

The slider component comes with 6 themes built in for quick styling without the use of CSS. Theming is supported by use of a built-in enum class. Shown below are sliders with each of the supported Themes applied:

Show Code


Slider Themes
  • Slider.Theme.DEFAULT
  • Slider.Theme.DANGER
  • Slider.Theme.GRAY
  • Slider.Theme.INFO
  • Slider.Theme.SUCCESS
  • Slider.Theme.WARNING

Parts and CSS properties​

Loading...