Range

Import

import {Range} from '@delightstack/components';

Basic Usage

Volume

View code

<Range value={50} label="Volume" />

Examples

Single Value with Display

Volume

View code

<Range value={50} show_value label="Volume" />

Range Selection (Two Thumbs)

Set range to enable two thumbs. The value becomes a [number, number] tuple.

Price range

$100 $500

View code

<script>
  import { Range } from '@delightstack/components';

  let priceRange = $state([100, 500]);
</script>

<Range
  range
  bind:value={priceRange}
  min={0}
  max={1000}
  step={50}
  format_value={(v) => `$${v}`}
  show_value
  label="Price range"
/>

With Tick Marks

Quality

View code

<Range value={3} min={1} max={5} step={1} show_ticks label="Quality" />

Custom Tick Labels

Provide an array of labels that align with each tick position.

Difficulty

View code

<Range
  bind:value={difficulty}
  min={0}
  max={100}
  step={25}
  show_ticks
  tick_labels={['Low', 'Medium', 'High', 'Very High', 'Max']}
  label="Difficulty"
/>

Value Formatting

Budget

$250

Opacity

75%

View code

<Range
  bind:value={price}
  min={0}
  max={1000}
  show_value
  format_value={(v) => `$${v}`}
  label="Budget"
/>

<Range
  bind:value={opacity}
  min={0}
  max={100}
  show_value
  format_value={(v) => `${v}%`}
  label="Opacity"
/>

Sizes

Small

Default

Medium

Large

View code

<Range size="0" value={25} label="Small" />
<Range size="1" value={50} label="Default" />
<Range size="2" value={75} label="Medium" />
<Range size="3" value={100} label="Large" />

Vertical

Set vertical to render the slider vertically. Height defaults to 200px and can be customized with the --range-height CSS variable.

Volume

60%

Bass

Treble

View code

<script>
  import { Range } from '@delightstack/components';

  let volume = $state(60);
  let bass = $state(40);
  let treble = $state(75);
</script>

<div style="display: flex; gap: 3rem; align-items: flex-end;">
  <Range vertical value={volume} label="Volume" show_value format_value={(v) => `${v}%`} />
  <Range vertical value={bass} min={0} max={100} step={10} show_ticks label="Bass" />
  <Range vertical value={treble} label="Treble" />
</div>

Props

Prop	Type	Default	Description
`value`	`number \| [number, number]`	`0`	Current value, bindable. Tuple for range mode
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`range`	`boolean`	`false`	Enable two-thumb range selection
`disabled`	`boolean`	`false`	Disable slider
`vertical`	`boolean`	`false`	Display slider vertically
`size`	`'0' \| '1' \| '2' \| '3'`	`'1'`	Slider size
`show_value`	`boolean`	`false`	Show value tooltip above thumb
`show_ticks`	`boolean`	`false`	Show step tick marks on track
`tick_labels`	`string[]`	-	Custom labels at tick positions
`format_value`	`(n: number) => string`	-	Value formatter for display
`label`	`string`	-	Accessible label text
`tooltip`	`string`	-	Tooltip on the overall component
`dense`	`boolean`	`false`	Tighter vertical spacing
`comfortable`	`boolean`	`false`	More vertical spacing
`id`	`string`	auto	Element ID
`name`	`string`	-	Form field name
`class`	`string`	`''`	Additional CSS classes

Events

Event	Detail	Description
`onchange`	`{ value: number \| [number, number] }`	Value changed (on release)
`oninput`	`{ value: number \| [number, number] }`	Value changing (during drag)

Accessibility

Uses native <input type="range"> elements for each thumb
aria-valuenow, aria-valuemin, aria-valuemax set on each thumb
aria-label from the label prop
Full keyboard navigation: Arrow keys adjust by step, Home/End jump to min/max
Range mode: two inputs with appropriate min/max constraints (thumbs cannot cross)
Focus ring on active thumb via :focus-visible
Hover and active states scale the thumb for visual feedback