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

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

Steps

<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 types page for type information.

Related components

References