svelte-awesome-slider

highly customizable slider component library

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)