UI Components
Slider
UI component for picking numeric values from a range.
<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
- Android:
android.widget.SeekBar
- iOS:
UISlider
- Previous
- SegmentedBar
- Next
- Switch