Inputsreadycomponentready

Slider

A native range slider with track, range, thumb, percent state, and form-compatible value behavior.

Importimport { Slider } from 'radcn/slider'

Preview

Live package example

Render the upstream 60% width slider with default value 50, max 100, and step 1.

Slider Demo

Render the upstream 60% width slider with default value 50, max 100, and step 1.

Preview

import { Slider } from 'radcn/slider'

type SliderProps = {
  ariaLabel?: string
  class?: string
  defaultValue?: number
  disabled?: boolean
  id?: string
  max?: number
  min?: number
  name?: string
  step?: number
  style?: string
}

export function SliderDemo({ class: className = '', ...props }: SliderProps = {}) {
  return (
    <Slider
      ariaLabel="Slider"
      class={`w-[60%] ${className}`.trim()}
      defaultValue={50}
      max={100}
      step={1}
      style="width:60%;"
      {...props}
    />
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Slider } from 'radcn/slider'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

Slider renders a native range input with an accessible label, min, max, step, and initial value in server HTML.
The named demo maps upstream defaultValue={[50]} to scalar defaultValue={50} for RadCN single-thumb Slider behavior.
The native input owns keyboard, pointer, disabled, form submission, and form reset behavior without React state.
Root metadata mirrors browser state with data-value, data-min, data-max, data-step, and data-orientation="horizontal" for testable state.

Customization

Root, native input, track, range, and thumb expose public data-radcn-slider hooks and package classes.
className={cn("w-[60%]", className)} maps to class plus explicit style="width:60%;" evidence, with cn represented by deterministic class composition.
The upstream prop spread maps to explicit RadCN props: ariaLabel, class, style, id, name, defaultValue, value, min, max, step, and disabled.
Track, range, and thumb visuals are driven by --radcn-slider-percent and Slider token variables, so apps can customize appearance without Radix or Tailwind.
Existing custom-token fixtures remain evidence for public Slider token modifiability.

Remix 3 Notes

use client, React component props, React.ComponentProps<typeof Slider>, and React useMemo map to explicit Remix UI props plus browser-owned range state.
Radix SliderPrimitive.Root, SliderPrimitive.Track, SliderPrimitive.Range, and SliderPrimitive.Thumb map to RadCN root, native input, track, range, and thumb hooks.
The upstream single-value array defaultValue maps to a scalar number because RadCN currently models a single native range input.
className maps to class, cn maps to explicit class composition, and data-slot maps to public data-radcn-slider* hooks.
Tailwind w-[60%], relative, flex, touch, select, disabled, orientation, track, range, thumb, border, focus, hover, transition, and sizing utilities map to package CSS, classes, style, CSS variables, and app-owned CSS.
Vendor source remains read-only evidence and is not imported by RadCN.