PrimitiveAvailable

Slider

A numeric range control with keyboard increments and a visible value.

Volume: 40%

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/slider.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

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

export default function Demo() {
  const [value, setValue] = useState([40]);
  return (
    <div className="grid w-full max-w-md gap-4">
      <p id="volume-label" className="bl-type-label">
        Volume: {value[0]}%
      </p>
      <Slider
        value={value}
        onValueChange={(next) => setValue(Array.isArray(next) ? next : [next])}
        min={0}
        max={100}
        step={5}
        aria-labelledby="volume-label"
      />
    </div>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Document initial, selected, disabled and focus states. Selection changes an indicator or position as well as color.
Use Space for selection controls; arrow keys change radios and sliders. Checkbox supports a mixed state.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
value	number[]	uncontrolled	Controlled thumb values.
min / max	number	0 / 100	Bounds.
step	number	1	Keyboard and pointer increment.
thumbLabels	string[]	Value 1?	Accessible names for individual thumbs; aria-labelledby takes precedence.

Accessibility

Rules that should remain intact when adapting the component to a product.

Name each thumb and communicate units. Use keyboard steps appropriate to the value range.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.