sc1m/design
ComponentsSlider

Slider

Slider component built on Base UI, styled with sc1m tokens.

StableBase UI

Live preview

Installation

pnpm dlx shadcn@latest add @sc1m/slider

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

import { Slider, SliderLabel, SliderValue } from "@/components/ui/slider";

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

<Slider defaultValue={40} className="w-72" />

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

Slider

PropTypeDefaultDescription
defaultValueValue—The uncontrolled value of the slider when it's initially rendered.
disabledbooleanfalseWhether the slider should ignore user interaction.
formatIntl.NumberFormatOptions—Options to format the value.
localeIntl.LocalesArgument—The locale used by Intl.NumberFormat when formatting the value.
maxnumber100The maximum allowed value of the slider.
minnumber0The minimum allowed value of the slider.
minStepsBetweenValuesnumber0The minimum steps between values in a range slider.
namestring—Identifies the field when a form is submitted.
formstring—Identifies the form that owns the slider inputs.
orientationOrientation'horizontal'The component orientation.
stepnumber1The granularity with which the slider can step through values. (A "discrete" slider.) The min prop serves as the origin for the valid values.
largeStepnumber10The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
thumbAlignment'center' | 'edge' | 'edge-client-only''center'How the thumb(s) are aligned relative to Slider.Control when the value is at min or max: - center: The center of the thumb is aligned with the control edge - edge: The thumb is inset within the control such that its edge is aligned with the control edge - edge-client-only: Same as edge but renders after React hydration on the client, reducing bundle size in return
thumbCollisionBehavior'push' | 'swap' | 'none''push'Controls how thumbs behave when they collide during pointer interactions.
valueValue—The value of the slider.
onValueChange((value: Value extends number ? number : Value, eventDetails: SliderRoot.ChangeEventDetails) => void)—Callback function that is fired when the slider's value changed.
onValueCommitted((value: Value extends number ? number : Value, eventDetails: SliderRoot.CommitEventDetails) => void)—Callback function that is fired when a value change is committed.

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Slider — see its reference for the full keyboard map.

  • Keyboard focus draws a 2px ring in --ring, never removed — only shown on :focus-visible, so a pointer press does not paint one.
  • Disabled parts mute their contents rather than the element, keeping the focus ring at full strength where the part stays focusable.

Source

src/components/ui/slider/slider.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

Separator

Separator component built on Base UI, styled with sc1m tokens.

Switch

Switch component built on Base UI, styled with sc1m tokens.

On this page

Live previewInstallationUsageExampleAPI referenceSliderAccessibilitySource