8.6 Released with 🥽 visionOS support and more!
Check it out

<Slider> is a UI component that provides a slider control for picking values within a specified numeric range.

xml
<Slider value="75" minValue="0" maxValue="100" />

Props

value

ts
value: number

Gets or sets the currently selected value of the slider.

Defaults to 0.

minValue

ts
minValue: number

Gets or sets the minimum value of the slider.

maxValue

ts
maxValue: number

Gets or sets the maximum value of the slider.

...Inherited

For additional inherited properties, refer to the API Reference.

Events

valueChange

ts
on('valueChange', (args: PropertyChangeData) => {
  const slider = args.object as Slider
  console.log('Slider value changed to', args.value)
})

Emitted when the value of the slider changes.

See PropertyChangeData.

Native component

Previous
SegmentedBar
Next
Switch