svelte-awesome-slider
highly customizable slider component library
- 🎹 built-in keyboard navigation
- 📱 mobile support
- 🤸♂️ accessibility compliant (see WAI ARIA pattern)
- 🏇 it’s compatible with form libraries
- 🧩 fully customizable
- 🔨 full typescript support
A huge thanks to MacFJA who helped me making this library!
Summary
Examples
Common props
Exemple (temperature)
<p id="temperature">Exemple (temperature)</p>
<Slider min={0} max={100} step={5} value={0} name="temperature" ariaLabelledBy="temperature" />
Track customization
Exemple (color)
<script>
const str = `
linear-gradient(to right, rgba(0,0,0,0), rgba(255,0,0,1)),
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%) top left / 20px,
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%) 10px 10px / 20px`;
</script>
<Slider --track-background={str} --track-width="50%" --track-height="20px" />
Thumb customization
Exemple (amount)
<Slider
--thumb-background="radial-gradient(circle, #84cc16 0%, #365314 100%)"
--thumb-size="20px"
/>
Vertical slider
Exemple (price)
<Slider
direction="vertical"
--track-width="360px"
--track-height="24px"
--track-background="#eee"
--thumb-size="24px"
/>
API
Props
The Slider component has the following props:
name | type | default value | usage |
---|---|---|---|
min | string | number | 0 | min value of the slider |
max | string | number | 100 | max value of the slider |
step | string | number | 1 | step value of the slider |
value | number | 50 | value of the slider |
ariaValueText | (current: number) => string | (current) => current.toString() | method to convert the current value to a string representation of the value for the aria-valuetext attribute. For example, a battery meter value might be conveyed as aria-valuetext=“8% (34 minutes) remaining”. See MDN documentation |
name | string | undefined | undefined | input name of the slider |
direction | 'horizontal' | 'vertical' | 'horizontal' | direction of the slider |
reverse | boolean | false | if true, the min and max values will be reversed |
keyboardOnly | boolean | false | disables mouse events |
slider | HTMLDivElement | undefined | undefined | div element representing the slider |
ariaLabel | string | undefined | undefined | aria-label props |
ariaLabelledBy | string | undefined | undefined | aria-labelledby props |
isDragging | boolean | false | indicate if the slider is being dragged |
** Be sure to include either ariaLabel
or ariaLabelledBy
for accessibility purpose.
CSS variables
The slider component can be customized with the following css variables:
name | type | default value | usage |
---|---|---|---|
--thumb-background | background | linear-gradient | Thumb background |
--thumb-border | border | none | Thumb border |
--thumb-size | dimension | 16px | Thumb size |
--track-background | background | linear-gradient | Track background |
--track-border | border | none | Track border |
--track-height | dimension | 6px | Track height |
--track-width | dimension | unset | Track width |
--focus-color | color | red | Focus color |
--margin-block | dimension | 8px | Margin block (top and bottom) |