DocsComponents

Slider

Adjust a value along a continuous or stepped range.

Volume: 40

Installation

Terminal

pnpm dlx shadcn@latest add https://react-toolbox.io/r/slider.json

New here? Set up your project first. Styles, fonts, and required components are included.

Usage

Use pinned for a discrete value label and snaps to snap to step positions. Keep value in state and provide an accessible label.

Use the Code tab above for a complete example. The import follows your configured UI alias. See Theming to customize colors, spacing, and style slots.

State and callbacks

Slider is controlled: pass value and update it in onChange. The thumb cannot retain a new value if the parent does not update value. There is no defaultValue API.

onDragStart and onDragStop describe pointer interaction, while onChange also reports keyboard and editable-input changes. Keep min, max, step, and value consistent with your domain.

API reference

Generated from the installed TypeScript source. Defaults are the values declared by each function; a dash means no parameter default is declared. Forwarded props can use the receiving component’s default. Callback types show the exact arguments passed to your handler.

`Slider`

Property	Type	Default
`buffer`	`number`	`0`
`disabled`	`boolean`	`false`
`editable`	`boolean`	`false`
`max`	`number`	`100`
`min`	`number`	`0`
`pinned`	`boolean`	`false`
`snaps`	`boolean`	`false`
`step`	`number`	`0.01`
`classNames`	`SliderTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`SliderTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`
`value`	`number`	`0`
`ref`	`Ref<HTMLDivElement>`	`—`

Callbacks

Property	Type	Default
`onChange`	`(value: number, event?: SyntheticEvent<HTMLInputElement \| HTMLTextAreaElement>) => void`	`—`
`onDragStart`	`() => void`	`—`
`onDragStop`	`() => void`	`—`

Also inherits Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onDragStart'>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.

Additional defaults on inherited props: className = ''.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

container
editable
innerknob
innerprogress
input
knob
pinned
pressed
progress
ring
slider
snap
snaps

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

Exported TypeScript types

Expand a type to inspect its full declaration, including generic constraints, union branches, callback arguments, ref handles, and inherited props. Import these types from @/components/ui/material/slider.

SliderProps

tsx

interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onDragStart'> {
  buffer?: number;
  disabled?: boolean;
  editable?: boolean;
  max?: number;
  min?: number;
  onChange?: (value: number, event?: SyntheticEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  onDragStart?: () => void;
  onDragStop?: () => void;
  pinned?: boolean;
  snaps?: boolean;
  step?: number;
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: SliderTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: SliderTheme;
  value?: number;
  ref?: Ref<HTMLDivElement>;
}

SliderTheme

tsx

type SliderTheme = Partial<
  Record<
    | 'container'
    | 'editable'
    | 'innerknob'
    | 'innerprogress'
    | 'input'
    | 'knob'
    | 'pinned'
    | 'pressed'
    | 'progress'
    | 'ring'
    | 'slider'
    | 'snap'
    | 'snaps',
    string
  >
>;

SliderClassNames

tsx

type SliderClassNames = SliderTheme;

Material guidelines

Continuous sliders work well for subjective adjustments such as volume. Use a discrete slider with stops and a value label when choosing among fixed values.
Keep the thumb’s larger interaction area even though its visible circle is smaller. Provide a meaningful label and keyboard adjustment.

Material Design 1: Sliders