Range Components

Examples

<script>
  import { Range } from 'flowbite-svelte'
</script>
<Label>Default range</Label>
<Range id="range1"/>

Disabled state

<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

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

Steps

Value: 2.5

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

Sizes

<Label>Small range</Label>
<Range id="small-range" size="small" />
<Label>Default range</Label>
<Range id="default-range" />
<Label>Large range</Label>
<Range id="large-range" size="large" />

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.

Name Type Default
id string 'range'
min number
max number
value number
step number
size 'small' | 'large'

References