Simple svelte range slider component. demo
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';
<Slider bind:value >
<Slider bind:value range />
<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
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>
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] |
default
- customizes both thumbs if left
or right
slots isn't providedleft
- provide to customize left thumbright
- provide to customize right thumbinput
- event fires when the value changes within thumb drag:root {
--track-bg: #ebebeb;
--progress-bg: #8abdff;
--thumb-bg: #5784fd;
}
set --thumb-bg
to transparent
if you use custom thumb
:root {
--thumb-bg: transparent;
}
MIT © BulatDashiev