Slider

A customizable range slider component with variants, orientations, and accessibility support for value selection

Installation

Install the Slider component using the nocta-ui CLI:

npx nocta-ui add slider

Import the component:

import { Slider } from '@/components/ui/slider';

The Slider component supports three variants: default and secondary.

Default

Secondary

Three size options are available: sm, md, and lg. The default size is md.

Small

Medium

Large

Temperature (16°C - 30°C)

22°C

Volume (0 - 10)

Step = 5 (Snaps to: 0, 5, 10, ...)

Default

Secondary Large

Disabled Slider

const [value, setValue] = useState(50);

return (
  <Slider
    value={value}
    onChange={setValue}
  />
);

return (
  <Slider
    defaultValue={50}
    onChange={(value) => console.log('Value changed:', value)}
  />
);

Prop	Type	Default	Description
`value`	`number`	—	Controlled value
`defaultValue`	`number`	`0`	Default value for uncontrolled usage
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`disabled`	`boolean`	`false`	Disable the slider
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Slider size
`variant`	`'default' \| 'secondary'`	`'default'`	Slider style variant
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Slider orientation
`showValue`	`boolean`	`false`	Show current value
`formatValue`	`(value: number) => string`	`(value) => value.toString()`	Custom value formatter
`onChange`	`(value: number) => void`	—	Value change handler
`onValueCommit`	`(value: number) => void`	—	Called when value is committed
`className`	`string`	`''`	Additional CSS classes
`trackClassName`	`string`	`''`	Track element CSS classes
`thumbClassName`	`string`	`''`	Thumb element CSS classes
`aria-label`	`string`	—	Accessibility label
`aria-labelledby`	`string`	—	ID of labeling element

The Slider component also accepts all standard HTML div attributes.