Slider

Slider provides an interactive control for selecting numeric values within a defined range, supporting both single value selection and range selection with multiple thumbs. It offers precise control through customizable steps and visual feedback with formatted value display.Hover over the component to see the tooltip with the current value. On mobile, tap the thumb to see the tooltip.

Key features:

• Range selection: Single value or dual-thumb range selection with configurable minimum separation
• Step control: Precise incremental selection with customizable step values
• Value formatting: Custom display formatting for current values and visual feedback

Behaviors

This component supports the following behaviors:

Properties

autoFocus

default: false

If this property is set to true, the component gets the focus automatically when displayed.

enabled

default: true

This boolean property value indicates whether the component responds to user events (true) or not (false).

initialValue

This property sets the Slider's initial value. It is not read only at mount: changing initialValue, minValue, or maxValue re-seeds the thumbs into the current range. That re-seeding fires no events, which makes binding all three to a derived value the way to drive a slider whose domain changes at runtime.

maxValue

default: 10

This property specifies the maximum value of the allowed input range.

minStepsBetweenThumbs

default: 1

This property sets the minimum number of steps required between multiple thumbs on the slider, ensuring they maintain a specified distance.

minValue

default: 0

This property specifies the minimum value of the allowed input range.

rangeStyle

This optional property allows you to apply custom styles to the range element of the slider.

readOnly

default: false

Set this property to true to disallow changing the component value.

required

default: false

Set this property to true to indicate it must have a value before submitting the containing form.

showValues

default: true

This property controls whether the slider shows the current values of the thumbs.

step

default: 1

This property defines the increment value for the slider, determining the allowed intervals between selectable values.

thumbStyle

This optional property allows you to apply custom styles to the thumb elements of the slider.

validationStatus

default: "none"

This property allows you to set the validation status of the input component.

Available values:

valueFormat

default: "(value) => value.toString()"

This property allows you to customize how the values are displayed.

Events

didChange

This event is triggered when value of Slider has changed.

Signature: didChange(newValue: any): void

• newValue: The new value of the component.

didCommit

This event is triggered when the user finishes an adjustment of Slider, rather than on every step crossed while dragging. Use it for expensive work (filtering a result set, fetching) and keep didChange for live display.

Signature: didCommit(newValue: any): void

• newValue: The committed value of the component.

This event fires once the user finishes an adjustment, while didChange fires on every step crossed during a drag. Use didCommit for work you do not want repeated mid-gesture — filtering a result set, fetching, recalculating — and keep didChange for the live readout.

<App var.live="{[20, 60]}" var.committed="{[20, 60]}">
  <Slider
    initialValue="{[20, 60]}"
    minStepsBetweenThumbs="1"
    onDidChange="(val) => live = val"
    onDidCommit="(val) => committed = val" />
  <Text value="dragging: {live[0]} – {live[1]}" />
  <Text value="committed: {committed[0]} – {committed[1]}" />
</App>

<App var.live="{[20, 60]}" var.committed="{[20, 60]}">
  <Slider
    initialValue="{[20, 60]}"
    minStepsBetweenThumbs="1"
    onDidChange="(val) => live = val"
    onDidCommit="(val) => committed = val" />
  <Text value="dragging: {live[0]} – {live[1]}" />
  <Text value="committed: {committed[0]} – {committed[1]}" />
</App>

Three details worth knowing before you move expensive work here:

• The two events are additive, not exclusive. Adopting didCommit does not quiet didChange — it keeps firing per step, which is what lets a live readout follow the thumbs while the expensive work waits for the release. Move work to didCommit; do not drop didChange.
• Keyboard adjustments commit per key-down, including auto-repeat — holding an arrow key produces one commit per repeat, not one when the key is released. If a slider is realistically keyboard-driven, the commit handler may still need a debounce.
• The event follows values the app or the user asks for: a pointer release that actually moved the value, a keyboard adjustment, and the setValue() method. Re-seeding the component by changing initialValue, minValue, or maxValue fires neither didCommit nor didChange.

gotFocus

This event is triggered when the Slider has received the focus.

Signature: gotFocus(): void

lostFocus

This event is triggered when the Slider has lost the focus.

Signature: lostFocus(): void

Exposed Methods

focus

This method sets the focus on the slider component.

Signature: focus(): void

setValue

This API sets the value of the Slider. You can use it to programmatically change the value. The new value is clamped against the minValue and maxValue in effect at the moment of the call, so a deferred or debounced call made while those props are changing may clamp against the previous range. The call also fires didChange and didCommit, exactly as a user adjustment would. To reset a slider whose domain changes at runtime, rebind initialValue instead — that re-seeds without firing events.

Signature: setValue(value: number | [number, number] | undefined): void

• value: The new value to set. Can be a single value or an array of values for range sliders.

value

This API retrieves the current value of the Slider. You can use it to get the value programmatically.

Signature: get value(): number | [number, number] | undefined

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

• label: The label displayed for the slider.
• thumb: The thumb elements of the slider.
• track: The track element of the slider.

Styling

Theme Variables