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;">👏</span>
</Slider>
Left, right slots
<Slider bind:value range>
<span slot="left" style="font-size: 20px;">👎</span>
<span slot="right" style="font-size: 20px;">👍</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 ifleftorrightslots isn't providedleft- provide to customize left thumbright- 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
MIT © BulatDashiev