RangeSlider

A two-thumb slider with an ordered tuple contract, minimum separation, and distinct accessible thumb names.@gemologic/sheen · forms

Playground

label

orientation

Latency window20 – 80

<RangeSlider label="Latency window" defaultValue={[20, 80]} min={0} max={100} minStepsBetweenThumbs={5}  orientation="horizontal"/>

Latency window

Latency window20 – 80

orientation: horizontal

Latency window20 – 80

orientation: vertical

Latency window20 – 80

Package

@gemologic/sheen

Source

packages/ui/src/primitives/Slider.tsx

Tokens

Role: sliderKeyboard: ArrowLeft, ArrowRight, ArrowUp, ArrowDown, PageUp, PageDown, Home, End

Give both bounds one clear group label; Sheen supplies distinct minimum and maximum thumb names.

Name	Type	Default	Description
`value`	`readonly [number, number]`	—	Controlled increasing pair within the configured range.
`defaultValue`	`readonly [number, number]`	—	Initial uncontrolled pair; defaults to min and max.
`onValueChange`	`(value: readonly [number, number]) => void`	—	Receives exactly two ordered values during interaction.
`onValueChangeEnd`	`(value: readonly [number, number]) => void`	—	Receives exactly two ordered values at interaction end.
`minStepsBetweenThumbs`	`number`	`0`	Nonnegative integer count of required steps between thumbs.
`label` *	`string`	—	Required visible group label.
`min`	`number`	`0`	Finite inclusive lower bound.
`max`	`number`	`100`	Finite inclusive upper bound.
`step`	`number`	`1`	Positive finite increment.
`formatOptions`	`Intl.NumberFormatOptions`	—	Intl number options evaluated with the effective scoped locale.
`name`	`string`	—	Shared native form name for the two range inputs.
`form`	`string`	—	ID of a form outside the component ancestry.
`description`	`string`	—	Supporting text associated with both thumbs.
`error`	`string`	—	Validation text that marks the slider invalid.
`disabled`	`boolean`	`false`	Disables pointer, keyboard, and form interaction.
`readOnly`	`boolean`	`false`	Prevents changes while retaining focus.
`required`	`boolean`	`false`	Marks both native range inputs required.
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	Horizontal or vertical physical orientation.
`inverted`	`boolean`	`false`	Reverses the physical direction without changing tuple order.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.