Range Selector

A slider component that allows users to select a single value or a range of values from a scale.

Component Source

View the source code for the range-selector component.

src/lib/components/ui/range-selector/range-selector.svelte

Installation

npx nnuikit add range-selector

import RangeSelector from "$lib/components/ui/range-selector/range-selector.svelte";

Quick Start

<RangeSelector value={30} type="single" />

Interactive Playground

Test single values, dual ranges, and vertical orientations.

Value: 50

<script lang="ts">
  import RangeSelector from "$lib/components/ui/range-selector/range-selector.svelte";

  let rangeValue = $state(50);
</script>

<RangeSelector bind:value={rangeValue} />

Mode

Orientation

Step Interval 1

Examples

Common patterns for range sliders.

Price Filtering

Selecting a range between $20 and $80.

Precise Increments

Step interval of 0.5 for thermal control.

Accessibility

Keyboard: Arrow keys adjust value, Home/End for min/max

ARIA: role='slider' with aria-valuenow, aria-valuemin, aria-valuemax

Touch: supports touch drag on mobile

Tooltip: shows current value on hover/drag

Props

Prop	Type	Default	Description
`value`	`number[]`	[0]	The value array. Use two numbers for a range slider.
`min`	`number`	0	The minimum allowed value.
`max`	`number`	100	The maximum allowed value.
`step`	`number`	1	The stepping interval.
`orientation`	`'horizontal' \| 'vertical'`	'horizontal'	The visual orientation of the slider.
`disabled`	`boolean`	false	Disable interactions.