Slider

The Slider component provides a range input for selecting numeric values. Built on Radix UI primitives for full accessibility and smooth interactions.

Import

import { Slider } from '@nqlib/nqui';

Basic Usage

import { Slider } from '@nqlib/nqui';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState([50]);

  return (
    <Slider value={value} onValueChange={setValue} max={100} />
  );
}

Examples

Controlled Slider

Use controlled state:

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

<Slider value={value} onValueChange={setValue} max={100} />

Range Slider

Use an array of two values for range selection:

const [value, setValue] = useState([25, 75]);

<Slider value={value} onValueChange={setValue} max={100} />

Custom Min/Max

Set custom minimum and maximum values:

<Slider min={0} max={100} step={10} />

With Steps

Control the step increment:

<Slider step={5} max={100} />

Disabled State

<Slider defaultValue={[50]} disabled max={100} />

Props

Styling

Sliders use the following design tokens:

• Track: bg-muted
• Range: bg-primary
• Thumb: bg-white with border-primary
• Focus ring: ring-ring/30

Accessibility

• Full keyboard navigation support
• ARIA attributes for screen readers
• Focus management
• Proper label association
• Disabled state handling

Best Practices

1. Always use labels: Provide clear labels indicating what the slider controls
2. Show current value: Display the current value near the slider
3. Use appropriate ranges: Set min/max values that make sense for your use case
4. Consider steps: Use steps for discrete values (e.g., 0, 5, 10, 15)
5. Handle disabled states: Clearly indicate when sliders are disabled

Next Steps

• Learn about Input for text inputs
• Explore Form Components for other form elements