Komponents
Components

Components

Slider

Single-value range control with tabular output and accessible thumb.

newfree
pnpm add @komponents/uiCanonical TypeScript source · tree-shakeable subpaths

Built on React Aria Slider. Output uses tabular numerals; the thumb keeps a 40×40 hit target.

6
Global motion dial for preview surfaces.
18

Usage

Snippet
import { Slider } from "@komponents/ui";

<Slider label="Opacity" defaultValue={42} minValue={0} maxValue={100} />

Props

  • showOutput — defaults to true
  • Standard React Aria value props (defaultValue, minValue, maxValue, step)

States

  • Description helper text
  • Disabled
  • Dragging press scale on the thumb

Accessibility

  • Role slider with keyboard arrow support
  • Label and output are associated automatically
  • Focus ring on the thumb

Switch

Immediate on/off control for preferences and modes.

Form

Accessible form container for native and custom field validation.

On this page

UsagePropsStatesAccessibility