JSPM

@bulatdashiev/svelte-slider

1.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1600
  • Score
    100M100P100Q110212F
  • License MIT

Simple range slider for Svelte 3

Package Exports

  • @bulatdashiev/svelte-slider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@bulatdashiev/svelte-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

MIT © BulatDashiev