Slider A range input control built on Base UI. Two visual variants (discrete and continuous), five intents, three sizes, horizontal and vertical orientation, range mode, tick marks, value tooltip, and RTL support.
import { Slider } from "@tessinaui/ui" ; < Slider defaultValue = { 40 } /> Variant Description discreteClassic thin-track slider with a pill-shaped thumb. Default. continuousLarge capsule/pill fill-style slider with a circular knob inside.
Intent Color token Use case nonebg-primaryDefault brand color errorbg-errorError or danger state warningbg-warningWarning or caution state successbg-successSuccess or confirmation state infobg-infoInformational state
Prop Type Default Description valuenumber | readonly number[]— Controlled value. Pass an array for range mode. defaultValuenumber | readonly number[]40Initial uncontrolled value. Pass an array for range mode. minnumber0Minimum allowed value maxnumber100Maximum allowed value stepnumber1Step increment largeStepnumber— Step for Page Up/Down or Shift+Arrow onValueChange(value: number | readonly number[]) => void— Fires on every change onValueCommitted(value: number | readonly number[]) => void— Fires on pointer up / key up variant"discrete" | "continuous""discrete"Visual style size"sm" | "md" | "lg""md"Scale intent"none" | "error" | "warning" | "success" | "info""none"Semantic color intent orientation"horizontal" | "vertical""horizontal"Layout direction disabledbooleanfalseDisable all interaction rounded"none" | "sm" | "md" | "lg" | "xl" | "full""full"Border radius of track, indicator, and thumb marksboolean | SliderMark[]falsetrue = auto-generate at every step (capped at 50). Array = custom positions with optional labels.minLabelReactNode— Label at the min end (left for horizontal, bottom for vertical) maxLabelReactNode— Label at the max end (right for horizontal, top for vertical) showValuebooleanfalseShow current value as a floating tooltip above/beside the thumb labelReactNode— Accessible label (rendered sr-only) leadingIconReactNode— Icon at the leading end (left for horizontal, bottom for vertical) trailingIconReactNode— Icon at the trailing end (right for horizontal, top for vertical) getAriaLabel(index: number) => string— Accessible label per thumb (range mode) getAriaValueText(formatted, value, index) => string— Accessible value text per thumb namestring— Form field name formatIntl.NumberFormatOptions— Number format for the value tooltip dir"ltr" | "rtl""ltr"Text direction classNamestring— Extra classes on the root element
Field Type Description valuenumberValue at which to render the tick dot labelReactNodeOptional text label beside the dot
Pass an array to defaultValue or value to enable range (two-thumb) mode:
< Slider defaultValue = {[ 20 , 80 ]} />
Built on Base UI's Slider primitive — keyboard navigation (Arrow keys, Page Up/Down, Home, End) is handled automatically.
Each thumb renders an <input type="range"> with a proper accessible role.
Use getAriaLabel in range mode to provide distinct labels for each thumb (e.g. "Minimum price", "Maximum price").
Tick mark labels are aria-hidden — they are visual decorations; use getAriaValueText for screen-reader value descriptions.
Focus ring: has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-offset-2 scoped to the thumb container.
All interactive areas meet the WCAG AA 44×44 px minimum touch target.
