Range
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
<script>
import { Range } from 'flowbite-svelte'
</script>Range slider example
<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' |
Forwarded Events
on:change
on:click
on:keydown
on:keypress
on:keyup