Svelte Range Slider - Flowbite

Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options

The range component can be used as an input field to get a number from the user based on your custom selection (ie. from 1 to 100) by using a sliding animation.

Setup #

  • Svelte
<script>
  import { Range } from 'flowbite-svelte'
</script>

Range slider example #

  • Svelte
<script>
  import { Range, Label } from 'flowbite-svelte'
</script>

<Label>Default range</Label>
<Range id="range1" />

Disabled state #

  • Svelte
<Label>Default range</Label>
<Range id="range-disabled" disabled/>

Binding value #

Use bind:value to bind the range input value as seen the the following examples.

Min and max #

Value: 5

  • Svelte
<script>
  import { Range, Label } from 'flowbite-svelte'
  let minmaxValue=5
</script>

<Label>Min-max range</Label>
<Range id="range-minmax" min="0" max="10" bind:value={minmaxValue}/>
<p>Value: {minmaxValue}</p>

Steps #

Value: 2.5

  • Svelte
<script>
  import { Range, Label } from 'flowbite-svelte'
  let stepValue=2.5
</script>

<Label>Range steps</Label>
<Range id="range-steps" min="0" max="5" bind:value={stepValue} step="0.5"/>
<p>Value: {stepValue}</p>

Sizes #

  • Svelte
<Label>Small range</Label>
<Range id="small-range" size="sm" />
<Label>Default range</Label>
<Range id="default-range" size="md"/>
<Label>Large range</Label>
<Range id="large-range" size="lg" />

Unknown attributes #

Since we added $$restProps to input field, you can contain the props which are not declared with export. It will pass down other unknown attributes to an element in a component.

Props #

The component has the following props, type, and default values. See types page for type information.

Use the class prop to overwrite the default class.

Name Type Default
value number
size 'sm' | 'md' | 'lg' 'md'

Forwarded Events #

on:change
on:click
on:keydown
on:keypress
on:keyup

References #

Radio Search Input