Svelte Slider

Simple range slider for Svelte 3

svelte-slider

Simple svelte range slider component. demo

Install

Install with npm or yarn:

npm i -D @bulatdashiev/svelte-slider

Then import Slider component to your Svelte app.

import Slider from '@bulatdashiev/svelte-slider';

Usage

Simple usage

<Slider bind:value >

Range input

<Slider bind:value range />

Min, max and step

<Slider min="-50" max="50" step="10" bind:value range />

You can bind to min, max and value, slider will change according to props change

Slots

Default slot

<Slider bind:value>
  <span style="font-size: 20px;">&#128079;</span>
</Slider>

Left, right slots

<Slider bind:value range>
  <span slot="left" style="font-size: 20px;">&#128078;</span>
  <span slot="right" style="font-size: 20px;">&#128077;</span>
</Slider>

Props

Name	Type	Default	Description
value	Array [number, number]	`[min, max]`
min	number	`0`
max	number	`100`
step	number	`1`
name	Array [string, string]	empty array	Provide names to inputs if you want use slider in form input
range	boolean	`false`	Set to `true` to use range input
order	boolean	`false`	Set to `true` if you want value[0] always be greater then value[1]

Slots

default - customizes both thumbs if left or right slots isn't provided
left - provide to customize left thumb
right - provide to customize right thumb

Events

input - event fires when the value changes within thumb drag

Style

:root {
  --track-bg: #ebebeb;
  --progress-bg: #8abdff;
  --thumb-bg: #5784fd;
}

set --thumb-bg to transparent if you use custom thumb

:root {
  --thumb-bg: transparent;
}

License

Top categories