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 lang="ts"> import { Range } from "flowbite-svelte"; </script>Range slider example #
- Svelte
<script lang="ts"> import { Range, Label } from "flowbite-svelte"; </script> <Label>Default range</Label> <Range id="range1" value={50} />Disabled state #
- Svelte
<script lang="ts"> import { Range, Label } from "flowbite-svelte"; </script> <Label>Default range</Label> <Range id="range-disabled" disabled value={50} />Binding value #
Use bind:value to bind the range input value as seen the the following examples.
Min and max #
- Svelte
<script lang="ts"> 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 #
- Svelte
<script lang="ts"> 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 lang="ts"> import { Range, Label } from "flowbite-svelte"; </script> <Label>Small range</Label> <Range id="small-range" size="sm" value={50} /> <Label>Default range</Label> <Range id="default-range" size="md" value={50} /> <Label>Large range</Label> <Range id="large-range" size="lg" value={50} />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.
Loading...