https://github.com/BulatDashiev/svelte-slider

Simple range slider for Svelte 3
https://github.com/BulatDashiev/svelte-slider

Last synced: about 2 months ago
JSON representation

Simple range slider for Svelte 3

• Host: GitHub
• URL: https://github.com/BulatDashiev/svelte-slider
• Owner: BulatDashiev
• Created: 2020-05-24T06:13:07.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T14:46:07.000Z (over 1 year ago)
• Last Synced: 2024-07-17T13:20:21.587Z (2 months ago)
• Language: Svelte
• Size: 14.6 KB
• Stars: 27
• Watchers: 1
• Forks: 7
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svelte-slider

Simple svelte range slider component. [demo](https://svelte.dev/repl/e93d43c42b434e3aa3e2a5815f805c75?version=3.22.3)

## Install

Install with npm or yarn:

```bash

npm i -D @bulatdashiev/svelte-slider

```

Then import `Slider` component to your Svelte app.

```js

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

```

## Usage

### Simple usage

```html

```

### Range input

```html

```

### Min, max and step

```html

```

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

### Slots

Default slot

```html

  👏

```

Left, right slots

```html

  👎

  👍

```

## 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

```css

:root {

  --track-bg: #ebebeb;

  --progress-bg: #8abdff;

  --thumb-bg: #5784fd;

}

```

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

```css

:root {

  --thumb-bg: transparent;

}

```

## License

MIT © BulatDashiev