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

This library may not be popular but it’s used by my other library svelte-awesome-color-picker!

A huge thanks to MacFJA who helped me making this library!

Summary

svelte-awesome-slider

Examples

Common props

Exemple (temperature: 50)

<p id="temperature">Exemple (temperature)</p>
<Slider min={0} max={100} step={5} bind:value 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`	bindable value of the slider
ariaValueText	`(current: number) => string`	`(current)`	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`		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`		div element representing the slider
ariaLabel	`string \| undefined`		aria-label props
ariaLabelledBy	`string \| undefined`		aria-labelledby props
ariaControls	`string \| undefined`		aria-controls props
isDragging	`boolean`	`false`	indicate if the slider is being dragged
onInput	`(value: number) => void`		event listener, dispatch an event when the user drags, clicks or tabs at the slider

** 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)