Slider

A single-value accessible slider with scoped locale formatting and native range input semantics.@gemologic/sheen · forms

Playground

label

orientation

Alert threshold75%

<Slider label="Alert threshold" defaultValue={0.75} formatOptions={{ style: "percent", maximumFractionDigits: 0 }} min={0} max={1} step={0.05}  orientation="horizontal"/>

Variant matrix

Percent threshold

Alert threshold75%

orientation: horizontal

Alert threshold75%

orientation: vertical

Alert threshold75%

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/primitives/Slider.tsx

Tokens

--sheen-color-bg-inset
--sheen-color-border-control
--sheen-color-accent
--sheen-color-focus-ring

Accessibility

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

Do

Use a NumberField when exact entry matters more than spatial adjustment.

Do not

Do not use a slider for an unbounded or highly precise value.

Generated props

Name	Type	Default	Description
`value`	`number`	—	Controlled finite value within the configured range.
`defaultValue`	`number`	—	Initial uncontrolled value; defaults to min.
`onValueChange`	`(value: number) => void`	—	Receives each accepted pointer or keyboard value.
`onValueChangeEnd`	`(value: number) => void`	—	Receives the accepted value at interaction end.
`label` *	`string`	—	Required visible 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`	—	Native range-input form name.
`form`	`string`	—	ID of a form outside the component ancestry.
`description`	`string`	—	Supporting text associated with the thumb.
`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 the native range input required.
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	Horizontal or vertical physical orientation.
`inverted`	`boolean`	`false`	Reverses the physical direction without changing numeric order.

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