Examples
Basic
Prop | Default | Type | Description |
---|---|---|---|
modelValue | - | number | The controlled value of the slider. Can be bind as v-model . |
defaultValue | [0] | number[] | The value of the slider when initially rendered. Use when you do not need to control the state of the slider. |
dir | ltr | string | The direction of the slider. |
disabled | false | boolean | When true , prevents the user from interacting with the slider. |
inverted | false | boolean | When true , the slider will be inverted. |
max | 100 | number | The maximum value of the slider. |
min | 0 | number | The minimum value of the slider. |
Read more in Radix Slider Root API.
Color
Prop | Default | Type | Description |
---|---|---|---|
slider | primary | string | Change the color of the slider. |
Dynamic Colors
Static Colors
Steps
Prop | Default | Type | Description |
---|---|---|---|
minStepsBetweenThumbs | 0 | number | The minimum permitted steps between multiple thumbs. |
step | 1 | number | The step value of the slider. |
To avoid the thumbs from overlapping, you can set the minStepsBetweenThumbs
prop.
40
[ 40, 55, 75 ]
Form Group
You can use the slider
component inside the form-group
component, or you can use it with the label
component.
Adjust the volume
40/50
Read more in Form-group component
Read more in Label component
Orientation
Configure the slider orientation by using the orientation
prop.
Prop | Default | Type | Description |
---|---|---|---|
orientation | horizontal | vertical , horizontal | The orientation of the slider. |
Size
Adjust the slider size without limits. Use breakpoints
(e.g., sm:sm
, xs:lg
) for responsive sizes or states
(e.g., hover:lg
, focus:3xl
) for state-based sizes.
Prop | Default | Type | Description |
---|---|---|---|
size | md | string | Set the slider general size. |
Customization
Configure the progress using the una
prop and utility classes.
60
50
40
30
50
40
75
85
80
50
100
40
30
Slots
Name | Props | Description |
---|---|---|
slider-track | - | The track of the slider. |
slider-thumb | - | The thumb of the slider. |
slider-range | - | The range of the slider. |
Presets
shortcuts/slider.ts
Props
types/slider.ts