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
<script>
  import { Range, Label } from 'flowbite-svelte';
</script>

<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
<script>
  import { Range, Label } from 'flowbite-svelte';
</script>

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

Component data #

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.

Props

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

Events

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

References #

Radio Search Input