@fouita/slider
@fouita/slider
npm i @fouita/slider
@fouita/slider

@fouita/slider

Svelte and tailwindcss slider (range input)

by fouita

0.0.4 (see all)License:MITTypeScript:Not Found
npm i @fouita/slider
Readme

Svelte and Tailwind Slider component

Form range (slider) component built with svelte and tailwindcss

Installation

    $npm i -D @fouita/slider

Usage

Single value range

slider fouita

image slider-simple

<script>
    import Slider from '@fouita/slider'                 
    let value = 21
</script>

<div class="p-6 text-3xl text-center">
    {value} 
</div>
<Slider class="mt-5 mx-6" min={0} max={30} bind:value />

Multi value range

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

slider fouita

<script>
    import Slider from '@fouita/slider'                 
    let value = [10,21]
</script>

<div class="p-6 text-3xl text-center">
    {value} 
</div>
<Slider class="mt-5 mx-6" min={0} max={30} bind:value />

With tooltip

By adding tooltip prop we can show the value when sliding

slider fouita

<Slider tooltip min={0} max={30} bind:value />

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

<Slider tooltip=hover min={0} max={30} bind:value />

Custom color

We can change the color by adding color prop

slider fouita

<Slider tooltip=hover color=pink-600 min={0} max={30} bind:value />

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

<Slider tooltip=hover minLabel='$0' maxLabel='Expensive' min={0} max={30} bind:value />

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

<Slider valueLabel={['%d €','%d €']} tooltip min={0} max={30} bind:value />

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

<script>
  import Slider from '@fouita/slider'

  let skill_level=['Basic','Medium','Advanced','Expert']
  let vlevel=10 // medium by default 

</script>

<Slider bind:value={vlevel} min={0} max={30} minLabel="Basic" maxLabel="Expert" valueLabel={skill_level[Math.round(vlevel/10)]} tooltip="hover" />

About

Fouita : UI framework for svelte + tailwind components

Downloads/wk

41

GitHub Stars

12

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
0.0.4
latest
1yr ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate