Forms

Slider

A range slider on a native input[type=range].

stableCSS onlyEnhancer: enhanceSliderBuilt on <input type="range">hydrateless/slider.css

A range slider styled with the hl-slider primitive. It is a native <input type="range">, so keyboard support, step increments, and form values all come built in. No JavaScript. Wrap it in data-hl-slider with an <output> and the optional enhancer keeps the readout, aria-valuetext, and the filled track in sync.

Playground

Value50Disabled

With a live readout

The enhancer writes the formatted value to the <output> and to aria-valuetext on every change, and publishes --hl-slider-progress so the track fills up to the thumb in every engine. data-hl-unit adds a suffix without any script.

Volume

35%

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceSlider } from '@hydrateless/enhancers/slider';

const handle = enhanceSlider(document);
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`value`	`number`	Not set	Controlled value; pair with the native `onChange` in React (Vue: `v-model`, Svelte: `bind:value`).

Events and callbacks

Event / Callback	Payload	Description
`hl:change`	`{ value: number }`	Fires from an enhanced slider with the numeric value on every `input` (also the `onValueChange` callback).

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
`--hl-primary`	Filled track and thumb color.
`--hl-surface-3`	Empty track color.

JavaScript

Props

Events and callbacks

CSS variables

Accessibility

Related