Slider
Adjust values within a specified range using a handle
Source ↗️ Report Issue ↗️Use the Slider
component for settings that require a range of values, rather than a fixed input. Common use cases include volume control, brigtness adjustment, price range filter, date range selection, or size and quantity control.
value
prop, it’ll use the value from the min
prop. Labels
To add a dynamic label to the component, introduce a new element that shares the same value as the value
prop, and update it when the value of the slider changes. Using CSS, you can align the label in any way you like.
Step
Using the step
prop, you can change the amount of increment between values. By default, the step
is set to 1. You can see how changing the step
from 1 to 10 and 20 changes the behavior of the Slider
component below.
States
If you need to disable the component, you can use the disabled
prop:
Colors
You can style Slider
components by overriding the following CSS variables:
If you need to style your Slider
components on an individual levels, you can also use the color
, background
, and thumb
props to achieve the same effect:
API
Prop | Purpose |
---|---|
min | Sets the lowest permitted value for the slider. |
max | Sets the highest permitted value for the slider. |
value | Sets the current value for the slider. If the value is not set, it'll take the value of the min prop. |
step | Sets the increment between values. |
disabled | Disables the slider. |
color | Sets the color of the slider. |
background | Sets the background color of the slider. |
thumb | Sets the color of the thumb. |
id | Pass an ID for the slider. |
className | Pass additional CSS classes for the slider. |
Svelte & React Prop | Purpose |
---|---|
onChange | Attach on-change event listeners to the slider. |
Request improvement for this page