Range Components
Examples
<script>
import { Range } from 'flowbite-svelte'
</script>
<Range id="range1" label="Default range"/>Disabled state
<Range id="range-disabled" label="Disabled state" disabled/>Binding value
Use bind:value to bind the range input value as seen the the following examples.
Min and max
Value: 5
<Range id="range-minmax" label="Min-max range" min="0" max="10" bind:value={minmaxValue}/>
<p>Value: {minmaxValue}</p>Steps
Value: 2.5
<Range id="range-steps" label="Range steps" min="0" max="5" bind:value={stepValue} step="0.5"/>
<p>Value: {stepValue}</p>Sizes
<Range id="range-disabled" label="Range steps" min="0" max="5" bind:value={stepValue} step="0.5"/>
<p>Value: {stepValue}</p>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 type-list page for type information.
| Name | Type | Default |
|---|---|---|
| id | string | 'range' |
| label | string | 'Range' |
| min | number | - |
| max | number | - |
| value | number | - |
| step | number | - |
| size | 'small' | 'large' | - |