Lenso UI

Foundation component · Forms

Slider

A cross-browser scalar or range control with a stable circular thumb and compact track.

Live playground

Choose Slider when

  • Use Slider for choosing a value from a bounded numeric range.
  • Use Progress when the value is read-only and communicates completion.
  • The visible thumb is 14px while the draggable target remains 28px.
  • Keep a visible value nearby when precision matters.

Accessibility

  • Give every thumb an accessible name through Slider.Label or aria-label.
  • Arrow keys adjust by step; Page Up and Page Down use the large step.
  • Do not use color as the only indication of the selected value.

Implementation

Compose the control from semantic parts; Root inherits the Base UI Slider API.

import { Slider } from "@lenso/ui/slider";

<Slider.Root defaultValue={27} max={100} min={0}>
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb aria-label="Contrast" />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>;
Lenso UI