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:

Terminal

npx nocta-ui add slider

Then import the component:

Import

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

Basic Usage

Default Slider

Primary Slider

Secondary Slider

Variants

The Slider component supports three variants: default, primary, and secondary.

Default

Primary

Secondary

Sizes

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

Small

Medium

Large

Features

Show Value

Custom Range & Formatting

Temperature (16°C - 30°C)

22°C

Volume (0 - 10)

Step Values

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

Vertical Orientation

Primary

Secondary Large

States

Disabled State

Disabled Slider

Controlled vs Uncontrolled

Controlled Slider

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

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

Uncontrolled Slider

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

The Slider component supports full keyboard navigation:

Arrow Left/Down: Decrease value by step
Arrow Right/Up: Increase value by step
Home: Jump to minimum value
End: Jump to maximum value
Page Down: Decrease by 10 × step
Page Up: Increase by 10 × step

Accessibility

The Slider component includes comprehensive accessibility features:

role="slider" for screen readers
aria-valuemin, aria-valuemax, aria-valuenow for value communication
aria-orientation for orientation awareness
aria-label and aria-labelledby support
Full keyboard navigation
Focus management with visible focus rings

Props

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' \| 'primary' \| '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.