Products · Components
Slider
Chooses a number by dragging along a line.
For a small count the person changes one at a time, use a Stepper.
Children: Nothing
Example
<Slider label="Volume" value="{{ volume }}" min="0" max="100" step="10" showValue onChange="setVolume" />export default definePage({
initialState: { volume: 40 },
mutations: {
setVolume: (_state, event: ValueEvent<number>) => ({ volume: event.detail.value }),
},
});Props
| Prop | Type | What it is |
|---|---|---|
value | number | |
min | number | Default: 0. |
max | number | Default: 100. |
step | number | Default: 1. |
showValue | boolean | |
label | string | |
hint | string | Help shown under the field, which error replaces. |
disabled | boolean | Dims it, and the person can't use it. |
Events
| Event | Sends | Notes |
|---|---|---|
onChange | { value } in detail | The new value, as a number. |