Range slider

Example

<div role="group" aria-labelledby="range-price-label" data-slean="range-slider"
	style="--slean-range-start: 20; --slean-range-end: 75">
	<span id="range-price-label">Price</span>
	<div data-slean-part="track">
		<input id="range-price-min" type="range" name="min" min="0" max="1000" step="10" value="200"
			aria-label="Minimum price" data-slean-part="start" />
		<input id="range-price-max" type="range" name="max" min="0" max="1000" step="10" value="750"
			aria-label="Maximum price" data-slean-part="end" />
	</div>
	<p><output for="range-price-min">200</output> – <output for="range-price-max">750</output></p>
</div>

<script lang="ts">
	// With @svelte-lean/vite the register import is injected for the static data-slean="range-slider".
	import '@svelte-lean/styles/range-slider.css';
	import { rangeStyle } from '@svelte-lean/primitives/range-slider';

	let min = $state(200);
	let max = $state(750);
</script>

<div
	role="group"
	aria-labelledby="price-label"
	data-slean="range-slider"
	style={rangeStyle(0, 1000, min, max)}
>
	<span id="price-label">Price</span>
	<div data-slean-part="track">
		<input type="range" name="min" min="0" max="1000" step="10" bind:value={min}
			aria-label="Minimum price" data-slean-part="start" />
		<input type="range" name="max" min="0" max="1000" step="10" bind:value={max}
			aria-label="Maximum price" data-slean-part="end" />
	</div>
	<p>{min} – {max}</p>
</div>

Why this implementation exists

The platform has a slider but no two-thumb slider. Two range inputs stacked on one track are almost one: each keeps its keyboard, pointer, step, value and form field, and is announced as a slider with its value. Component libraries rebuild all of that in JavaScript around a pair of divs.

What two inputs cannot do alone is stay in order and show the range between them. One shared input listener does both: when a thumb passes the other, its value is set back and a new input event carries the clamped value to any binding; the two percentages are written as custom properties on the root, and the stylesheet paints the rail from them.

Usage

Install @svelte-lean/primitives for the behavior and @svelte-lean/styles for the stylesheet. With @svelte-lean/vite the registration is injected for every static data-slean="range-slider"; without it, import the register module once.

npm install @svelte-lean/primitives

pnpm add @svelte-lean/primitives

yarn add @svelte-lean/primitives

bun add @svelte-lean/primitives

import '@svelte-lean/primitives/range-slider/register';

import '@svelte-lean/styles/range-slider.css';

Give both inputs the same min, max and step, a name each for the form, and an accessible name each (“Minimum price”, “Maximum price”). Name the group with a visible label.

Render the root’s inline style with rangeStyle(min, max, start, end) so the fill is right before the first input; with bind:value in Svelte, derive it from the bound values. After setting values from code, call syncRange(root).

Anatomy

Runtime profile

The range slider registers one input handler with the shared router. A thousand sliders keep one listener (tests/range-slider.test.ts).

Accessibility contract

• Each thumb is a native slider, announced with its own name and value; the group is named by its label.
• Tab reaches the start thumb, then the end thumb; the arrow keys, Home and End are native.
• <output for> ties each displayed value to its input.

Keyboard

Platform features

Without JavaScript

Both inputs work and submit their values; the thumbs are not kept in order, so the form handler should accept a start above the end, and the fill stays where the server painted it.

Server rendering

Render the values and the root's inline style from rangeStyle(); the page is correct before hydration. A Content Security Policy without style-src-attr 'unsafe-inline' blocks that attribute: the fill then spans the track until the first input, since the behavior writes through the CSSOM.

Before hydration

Before the behavior loads, the thumbs move and submit but are not kept in order. The first input event after hydration clamps and repaints.

Styling

range-slider.css stacks the two inputs on the track, lets only their thumbs take the pointer, draws the rail and the fill from --slean-range-start and --slean-range-end (mirrored under :dir(rtl)), and puts the start thumb on top where both meet past the middle. The tokens it reads:

State selectors the stylesheet targets, all from the platform or ARIA: ::-moz-range-thumb, ::-moz-range-track, ::-webkit-slider-runnable-track, ::-webkit-slider-thumb, :dir(rtl), :disabled, :focus-visible.

Compatibility notes

Range inputs, outputs and the thumb pseudo-elements are widely available. round() (Baseline 2024) decides which thumb is on top where both meet; without it the end thumb stays on top. Vertical sliders and marks along the track are not part of the primitive.

Examples

A minimum gap

data-slean-gap keeps the two values that many units apart: a thumb stops before the other one instead of on it.

<!-- The two values stay at least 100 apart. -->
<div role="group" aria-label="Price" data-slean="range-slider" data-slean-gap="100">…</div>

Testing

• packages/primitives/tests/range-slider.test.ts Vitest: fill, outputs, clamp, gap, rangeStyle(), 1000 roots
• apps/playground/tests/primitives/widgets.spec.ts Playwright: tooltip, toast, tree, range slider and number field in Chrome, with axe
• packages/styles/tests static checks of the stylesheet (layers, tokens, specificity, dark parity)

Source

• packages/primitives/src/range-slider/contract.md the contract in prose: semantics, keyboard, focus, ARIA, SSR, JS-disabled behavior
• packages/primitives/src/range-slider/contract.ts typed constants: name, tier, base, parts, options, events
• packages/primitives/src/range-slider/behavior.ts the behavior definition
• packages/primitives/src/range-slider/register.ts the registration module
• packages/styles/css/range-slider.css the optional stylesheet