Range

The Range component lets the user choose a number by dragging a handle. It is a native range input underneath, so the keyboard, touch and screen readers all work, while the track, the handle and the value bubble follow your theme.

Example

Import the component, bind a number and give it a label as the child. The track fills up to the value as it moves.

Svelte 
<script>
  import { Range } from "theui-svelte";
  let volume = $state(40)
</script>

<Range bind:value={volume}>Volume</Range>

Min, Max and Step

Use min, max and step the way you would on a native input. The default range is 0 to 100 in steps of 1.

Svelte 
<Range value={30} min={0} max={100} step={10}>Steps of 10</Range>
<Range bind:value={temperature} min={10} max={30} step={0.5}>Half degrees</Range>

Showing the Value

Set showValue to put the number beside the slider, or showValue="tooltip" to float it above the handle as it moves.

40
40
Svelte 
<Range bind:value={volume} showValue>Inline value</Range>
<Range bind:value={volume} showValue="tooltip">Value bubble</Range>

Formatting

The format prop turns the number into the text that is shown, for money, units or anything else. It is used by the inline value, the bubble and the text read out to screen readers.

$250
21 °C
Svelte 
<Range bind:value={budget} min={0} max={1000} step={10} showValue="tooltip" format={(v) => `$${v}`}>
  Budget
</Range>

<Range bind:value={temperature} min={10} max={30} step={0.5} showValue format={(v) => `${v} °C`}>
  Temperature
</Range>

Ticks

Pass ticks to mark places along the track. Give it plain numbers, or objects with your own text.

Svelte 
<Range bind:value={temperature} min={10} max={30} ticks={[10, 15, 20, 25, 30]}>Numbers</Range>

<Range
  value={2}
  min={1}
  max={4}
  ticks={[
    {value: 1, label: "Low"},
    {value: 2, label: "Fair"},
    {value: 3, label: "Good"},
    {value: 4, label: "Best"}
  ]}
>Labels</Range>

Sizes

The size prop takes sm, md, lg and xl, changing the thickness of the track and the size of the handle. Inside a Form or a Fieldset the size is inherited, so you set it once.

Svelte 
<Range value={40} size="sm" />
<Range value={40} size="md" />
<Range value={40} size="lg" />
<Range value={40} size="xl" />

Helper Text and Disabled

Add helperText to explain the field, and disabled to switch it off. The helper text is linked to the input, so screen readers read it with the label.

Drag, or use the arrow keys
Svelte 
<Range value={60} helperText="Drag, or use the arrow keys">Quality</Range>
<Range value={60} disabled>Disabled</Range>

Reset Styles

Set reset to true to drop the custom track and thumb and hand the control back to the browser, so the slider is drawn the way the operating system draws it. Anything you pass in rangeClasses still applies, and the size variables stay, so the label and the helper text are unchanged. The default is false, and a Form or a Fieldset can set it for every field it holds.

Svelte 
<Range reset rangeClasses="w-full accent-brand-500">Native slider</Range>

Customization

The colour of the filled track and the handle follows the text colour, so a single class recolours both. Use rangeClasses for the input itself and wrapperClasses for the field around it.

80
Svelte 
<Range value={40} class="text-info-500" />
<Range value={60} class="text-success-500" size="lg" />
<Range value={80} class="text-error-500" size="xl" showValue />

Accessibility

The component is a native <input type="range">, so the browser gives it the slider role, the minimum, maximum and current value, and the usual keys: the arrows move by one step, Page Up and Page Down move in bigger jumps, and Home and End go to the ends. The label you pass is tied to the input, and helperText is linked with aria-describedby. Where the number needs words, such as a price or a temperature, the format function is used for the spoken value as well. The fill direction follows the page, so a right to left page fills from the right.

Configuration