<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" />
html
<Slider value="75" minValue="0" maxValue="100" />
tsx
<slider value="{sliderValue}" onValueChange={sliderValueChanged} />
tsx
<slider
  width={300}
  value={sliderValue()}
  on:valueChange={handleChange}
/>
svelte
<slider bind:value={sliderValue} />
vue
<Slider v-model="sliderValue"/>

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