Svelte Tw Slider

Svelte and tailwindcss slider (range input)

Svelte and Tailwind Slider component

Form range (slider) component built with svelte and tailwindcss


    $npm i -D @fouita/slider


Single value range

image slider-simple

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

<div class="p-6 text-3xl text-center">
<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

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

<div class="p-6 text-3xl text-center">
<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 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 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 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 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

  import Slider from '@fouita/slider'

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


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


Fouita : UI framework for svelte + tailwind components

Top categories

Loading Svelte Themes