Design System/Atoms/Slider

Slider

Range input for selecting a numeric value.

When To Use

  • Use Slider when the user needs to enter or choose information as part of a larger form or workflow.
  • Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
  • Use the examples below to choose the least complex control that still communicates the user’s next step clearly.

When Not To Use

  • Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
  • Do not hide required context, validation, or option meaning behind placeholder text alone.

Accessibility Notes

  • Keep a visible label or an equivalent accessible name attached to the control.
  • Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
  • Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.

Key Props / API

Composition surface

Slider keeps the native HTML or Radix API surface, then layers in design-system styling and composition defaults.

Example Code

import { Slider } from "@hilum/ui"

<div className="flex flex-col gap-2">
  <div className="flex justify-between text-xs text-ground-400">
    <span>Slower</span>
    <span>Faster</span>
  </div>
  <Slider defaultValue={[50]} max={100} step={1} />
</div>

Slider

Default

Range input with ground thumb and track

SlowerSpeedFaster