Source

Command Palette

Search for a command to run...

Slider

Input for selecting a value from a given range via draggable thumbs.

About Slider

An input component for selecting values from a defined range using draggable thumbs. Supports single or multiple values, customizable sizes (sm, md, lg), and vertical orientation. Built on Radix UI primitives with consistent LSD styling and focus states.

Installation

Import the Slider component from LSD:
import { Slider } from '@nipsys/lsd'

export default function MyComponent() {
  return <Slider />
}

Usage

The simplest form of the component with default styling.
Basic

Sizes

Component sizes for different contexts and visual hierarchy.
Sizes

Features

Additional features and capabilities of the component.
Disabled

Multiple

Range

API Reference

Slider

size
Size variant for the slider. Determines track height and thumb size.
Type: "sm" | "md" | "lg"
'aria-label'
Accessible label for screen readers. Required for accessibility.
Type: string

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate to slider thumb(s)• Arrow Left/Right - Decrease/increase value (horizontal)• Arrow Up/Down - Decrease/increase value (vertical)• Home - Jump to minimum value• End - Jump to maximum value• Page Up/Down - Jump by larger step increment
ARIA Attributes
Proper ARIA attributes for screen readers
• role="slider" - Identifies element as slider• aria-valuenow - Current value of thumb• aria-valuemin - Minimum allowed value• aria-valuemax - Maximum allowed value• aria-orientation - Orientation (horizontal/vertical)• aria-label or aria-labelledby - Accessible label
Focus States
Visible focus indicators for keyboard users
• Thumb elements are focusable and receive keyboard focus. Focus moves between thumbs using Tab. Arrow keys adjust the focused thumb's value. Visual focus indicators ensure keyboard users can see which thumb has focus.
Select