https://github.com/fouita/svelte-tw-slider

Svelte and tailwindcss slider (range input)
https://github.com/fouita/svelte-tw-slider

Last synced: about 1 year ago
JSON representation

Svelte and tailwindcss slider (range input)

• Host: GitHub
• URL: https://github.com/fouita/svelte-tw-slider
• Owner: fouita
• Created: 2020-09-15T15:50:52.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-04-10T08:57:04.000Z (about 5 years ago)
• Last Synced: 2025-03-05T09:26:44.638Z (over 1 year ago)
• Language: Svelte
• Size: 17.6 KB
• Stars: 11
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Svelte and Tailwind Slider component

Form range (slider) component built with svelte and tailwindcss

# Installation

```bash

    $npm i -D @fouita/slider

```

# Usage

## Single value range

![slider fouita](https://cdn.fouita.com/assets/pics/template/slider/slider-simple.jpg)

> image slider-simple

```html

	import Slider from '@fouita/slider'					

	let value = 21



	{value}	



```

## Multi value range

Multi values works with array of two values, like the following

![slider fouita](https://cdn.fouita.com/assets/pics/template/slider/slider-range.jpg)

```html

	import Slider from '@fouita/slider'					

	let value = [10,21]



	{value}	



```

## With tooltip

By adding `tooltip` prop we can show the value when sliding

![slider fouita](https://cdn.fouita.com/assets/pics/template/slider/slider-tooltip.jpg)

```html

```

We can show the tooltip when hovering over the slider pointer by adding `tooltip=hover`

```html

```

## Custom color

We can change the color by adding `color` prop

![slider fouita](https://cdn.fouita.com/assets/pics/template/slider/slider-pink.jpg)

```html

```

## Custom labels

To change the labels min/max we need to attribute `minLabel` & `maxLabel`. We can also remove them by using an empty string.

![slider fouita](https://cdn.fouita.com/assets/pics/template/slider/slider-mlabel.jpg)

```html

```

## Custom indicators 

To change the values on the tooltip we can add a value format by using `valueLabel` prop.

In case you need to use only one value (not a range) you can add a simple string `valueLabel="$%d"`

![slider fouita](https://cdn.fouita.com/assets/pics/template/slider/slider-vlabel.jpg)

```html

```

## Custom scale

We can use custom array of values and show the desired label when we hit a specific number.

Assuming a scale of skills `[basic, medium, advanced, expert]`

* 0-5 : basic 

* 5-15 : medium

* 15-25: advanced

* 25-30: expert

![slider fouita](https://cdn.fouita.com/assets/pics/template/slider/slider-scale.jpg)

```html

  import Slider from '@fouita/slider'

  let skill_level=['Basic','Medium','Advanced','Expert']

  let vlevel=10 // medium by default 

```

## About

[Fouita : UI framework for svelte + tailwind components](https://fouita.com)