Slider

Slider

Category: Forms & inputs

<Slider label="Volume" defaultValue={70} formatOptions={{ style: 'percent' }} maxValue={100} />;

{
  /* Range slider */
}
<Slider
  label="Budget"
  defaultValue={[40, 80]}
  formatOptions={{ style: 'currency', currency: 'USD' }}
  maxValue={500}
  step={5}
/>;

Install: @helix-ui/core

import { Slider } from '@helix-ui/core';

status: stable · since: 0.2.0

Tags: range, value, horizontal

Anatomy

─────────●─────────────────  single thumb
─────●═══════════●─────────  range (two thumbs)

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — fills width, ~32px tall
• stackable — true
• fullBleed — false

Visual

A horizontal track with a brand-filled portion under the thumb(s). Single thumb for one value; two thumbs for a range. Optional ticks and labels.

Props

Name	Type	Default	Description
label	ReactNode	—	Visible label.
showValue	boolean	true	Render the formatted current value to the right of the label.
value	number | number[]	—	Controlled value(s).
defaultValue	number | number[]	—	Uncontrolled initial value(s).
minValue	number	0	Min.
maxValue	number	100	Max.
step	number	1	Step.
formatOptions	Intl.NumberFormatOptions	—	Format the rendered output (percent, currency, units).
onChange	(value) => void	—	Change handler.

Tokens used

color.bg.surface.default, color.bg.action.neutral.default, color.bg.action.brand.default, color.text.primary, color.text.secondary, color.text.muted, color.border.focus, radius.full, space.2, font.family.sans, font.size.sm, font.weight.medium, shadow.sm

Accessibility

Keyboard

Key	Action
ArrowKeys	Step value.
PageUp	Big step up.
PageDown	Big step down.
Home	Min.
End	Max.

Composes with

Component	Relation	Note
Form	parent	Submitted as part of a Form.
Field	wraps	Has built-in label/description.
NumberField	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helix-ui prompt DSL and integrations like Cursor / Claude Code.

volume control

“slider 0 to 100”

<Slider label="Volume" value={vol} onChange={setVol} minValue={0} maxValue={100} />

price range

“range slider for min/max price”

<Slider label="Price" value={range} onChange={setRange} minValue={0} maxValue={500} />

Related

• NumberField