class: Slider

[116:7] extends: Node, Control, Region

The Slider class wraps the JavaFX Slider control, a track with a draggable thumb that lets the user select a numeric value within a defined minimum and maximum range. The slider can be oriented horizontally or vertically and optionally displays major and minor tick marks along the track as well as numeric labels at major tick positions. The thumb can be configured to snap to the nearest tick mark for discrete value selection. Value-change events are reported through the onChange callback, making it easy to react to user input in real time.

CSS Pseudo-classes -- Slider

Pseudo-class	Description
`horizontal`	Applies when the slider orientation is horizontal.
`vertical`	Applies when the slider orientation is vertical.

CSS Properties -- Slider

Property	Values	Default	Description
`-fx-orientation`	`horizontal \| vertical`	`horizontal`	Direction in which the slider track is drawn.
`-fx-show-tick-labels`	`true \| false`	`false`	When true, numeric labels are drawn at each major tick mark.
`-fx-show-tick-marks`	`true \| false`	`false`	When true, tick marks are drawn on the slider track.
`-fx-major-tick-unit`	`<number>`	`25`	Value interval between adjacent major tick marks.
`-fx-minor-tick-count`	`<integer>`	`3`	Number of minor tick marks placed between each pair of major tick marks.
`-fx-snap-to-ticks`	`true \| false`	`false`	When true, the thumb snaps to the nearest tick mark position on release.
`-fx-block-increment`	`<integer>`	`10`	Amount the value changes when the user performs a block (page) increment.

CSS Properties -- Control

Property	Values	Default	Description
`-fx-skin`	`<string>`	`null`	Fully qualified class name of the Skin to use for rendering this control.
`-fx-focus-traversable`	`true \| false`	`true`	When true, the control participates in focus traversal via the keyboard Tab key.

CSS Properties -- Region

Background fills

Property	Values	Default	Description
`-fx-background-color`	`<paint> [, <paint>]*`	`transparent`	One or more paint values for background fill layers, rendered back to front.
`-fx-background-insets`	`<size>` or `<t> <r> <b> <l>` [, ...]*	`0 0 0 0`	Insets from the region edges for each background fill layer.
`-fx-background-radius`	`<size> [/ <size>]* [, ...]*`	`0 0 0 0`	Corner radii for each background fill layer.

Background images

Property	Values	Default	Description
`-fx-background-image`	`<uri> [, <uri>]*`	`null`	One or more image URIs for background image layers.
`-fx-background-position`	`<bg-position> [, ...]*`	`0% 0%`	Position of each background image within the region. Accepts keywords or size values.
`-fx-background-repeat`	`<repeat-style> [, ...]*`	`repeat repeat`	Tiling behavior for each background image. Values: repeat, no-repeat, round, space applied per axis.
`-fx-background-size`	`<bg-size> [, ...]*`	`auto auto`	Dimensions for each background image. Supports cover, contain, stretch, or explicit sizes.

Stroked borders

Property	Values	Default	Description
`-fx-border-color`	`<paint>` or `<t> <r> <b> <l>` [, ...]*	`null`	Paint colors for the border stroke layers.
`-fx-border-insets`	`<size>` or `<t> <r> <b> <l>` [, ...]*	`null`	Insets from region edges for each border layer.
`-fx-border-radius`	`<size> [, ...]*`	`null`	Corner radii for border stroke layers.
`-fx-border-style`	`<border-style> [, ...]*`	`null`	Border line style (solid, dotted, dashed) plus phase and line cap/join options per layer.
`-fx-border-width`	`<size>` or `<t> <r> <b> <l>` [, ...]*	`null`	Thickness of each border stroke layer, per side.

Border images

Property	Values	Default	Description
`-fx-border-image-source`	`<uri> [, <uri>]*`	`null`	Image URIs used to paint the border.
`-fx-border-image-insets`	`<size>` or `<t> <r> <b> <l>` [, ...]*	`0 0 0 0`	Insets for each border image layer.
`-fx-border-image-repeat`	`<repeat-style> [, ...]*`	`repeat repeat`	Tiling behavior for each border image.
`-fx-border-image-slice`	`<size>` or `<t> <r> <b> <l>` [fill] [, ...]*	`100%`	Divides each border image into nine regions. Adding fill preserves the center region.
`-fx-border-image-width`	`<size>` or `<t> <r> <b> <l>` [, ...]*	`1 1 1 1`	Width of each border image slice per side.

Other Region properties

Property	Values	Default	Description
`-fx-padding`	`<size>` or `<t> <r> <b> <l>`	`0 0 0 0`	Interior padding between the region border and its content.
`-fx-shape`	`<string>`	`null`	SVG path string that defines a custom clip shape for the region.
`-fx-scale-shape`	`true \| false`	`true`	When true, the shape is scaled to fit the region.
`-fx-position-shape`	`true \| false`	`true`	When true, the shape is centered within the region.
`-fx-snap-to-pixel`	`true \| false`	`true`	When true, positions and sizes are rounded to whole pixel boundaries.
`-fx-min-width`	`<size>`	`-1`	Minimum width. -1 uses the computed minimum.
`-fx-pref-width`	`<size>`	`-1`	Preferred width. -1 uses the computed preferred.
`-fx-max-width`	`<size>`	`-1`	Maximum width. -1 uses the computed maximum.
`-fx-min-height`	`<size>`	`-1`	Minimum height. -1 uses the computed minimum.
`-fx-pref-height`	`<size>`	`-1`	Preferred height. -1 uses the computed preferred.
`-fx-max-height`	`<size>`	`-1`	Maximum height. -1 uses the computed maximum.

CSS Properties -- Node

Property	Values	Default	Description
`-fx-blend-mode`	`add \| blue \| color-burn \| color-dodge \| darken \| difference \| exclusion \| green \| hard-light \| lighten \| multiply \| overlay \| red \| screen \| soft-light \| src-atop \| src-in \| src-out \| src-over`	`null`	Blend mode used when compositing this node with nodes beneath it.
`-fx-cursor`	`null \| crosshair \| default \| hand \| move \| e-resize \| h-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize \| v-resize \| text \| wait \| <url>`	`null` (inherits)	Mouse cursor shape shown when the pointer is over this node. Inherits from parent by default.
`-fx-effect`	`<effect>`	`null`	A visual effect (e.g. DropShadow, InnerShadow) applied to the rendered node.
`-fx-focus-traversable`	`true \| false`	`false`	Whether this node participates in focus traversal. Overridden to `true` by Control.
`-fx-view-order`	`<number>`	`0`	Adjusts rendering and hit-test order within the parent without changing the scene graph order.
`-fx-opacity`	`<number> [0.0 - 1.0]`	`1`	Opacity of the node. 0 is fully transparent, 1 is fully opaque.
`-fx-rotate`	`<number>`	`0`	Rotation angle in degrees applied around the node's center point. Positive values are clockwise.
`-fx-scale-x`	`<number>`	`1`	Scale factor along the X axis about the node's center.
`-fx-scale-y`	`<number>`	`1`	Scale factor along the Y axis about the node's center.
`-fx-scale-z`	`<number>`	`1`	Scale factor along the Z axis about the node's center.
`-fx-translate-x`	`<number>`	`0`	Translation offset along the X axis in pixels.
`-fx-translate-y`	`<number>`	`0`	Translation offset along the Y axis in pixels.
`-fx-translate-z`	`<number>`	`0`	Translation offset along the Z axis in pixels.
`visibility`	`visible \| hidden \| collapse \| inherit`	`visible`	Controls whether the node is rendered and participates in layout. `collapse` removes it from layout; `hidden` keeps the space.
`-fx-managed`	`true \| false`	`true`	When false, the parent layout does not manage this node's position or size.

Methods

Slider (double Min, double Max, double Val)

Initializes a new Slider instance with specified minimum, maximum, and initial values.
- @p Min is a double value that sets the minimum value of the slider.
- @p Max is a double value that sets the maximum value of the slider.
- @p Val is a double value to set for the initial position of the slider.
- @r this object
getValue ()

Returns the current value of the slider.
- @r A double with the current slider value.
setMin (double Min)

Sets the minimum value of the slider.
- @p Min is a double with the minimum value.
- @r this object for chaining
setMax (double Max)

Sets the maximum value of the slider.
- @p Max is a double with the maximum value.
- @r this object for chaining
setMajorTickUnit (double Unit)

Sets the value interval between adjacent major tick marks.
- @p Unit is a double with the major tick unit.
- @r this object for chaining
setMinorTickCount (int Count)

Sets the number of minor tick marks placed between each pair of major tick marks.
- @p Count is an int with the minor tick count.
- @r this object for chaining
setShowTickLabels (bool Show)

Sets whether numeric labels are shown at each major tick mark.
- @p Show is a bool with true to show tick labels.
- @r this object for chaining
setShowTickMarks (bool Show)

Sets whether tick marks are drawn on the slider track.
- @p Show is a bool with true to show tick marks.
- @r this object for chaining
setSnapToTicks (bool Snap)

Sets whether the thumb snaps to the nearest tick mark on release.
- @p Snap is a bool with true to enable snap-to-ticks.
- @r this object for chaining
setOrientation (string Orientation)

Sets the orientation of the slider.
- @p Orientation is a string: HORIZONTAL or VERTICAL.
- @r this object for chaining
setTooltip (object TooltipObj)

Attaches a Tooltip to this slider.
- @p TooltipObj is a Tooltip object to display on hover.
- @r this object for chaining
setId (string Id)

Sets the CSS id of this Slider node.
- @p Id is a string with the CSS id.
- @r this object for chaining
setShowTicks (bool ShowTicks)

Sets whether tick marks should be displayed on the slider.
- @p ShowTicks A boolean specifying whether to show tick marks.
- @r this object for chaining
setShowLabels (bool ShowTicks)

Sets whether tick labels should be displayed on the slider.
- @p ShowTicks A boolean specifying whether to show tick labels.
- @r this object for chaining
setValue (double Val)

Sets the current value of the slider.
- @p Val is a double value to set for the slider.
- @r this object for chaining
onChange (callback OnChange)

Sets a callback function to execute when the slider's value changes.
- @p OnChange The callback function for the value change event.
- @r void