Component
Slider
An interactive range selector input allowing users to slide and choose single values. Adheres to brutalist guidelines with neon tracks, heavy circular grab thumbs, and scale micro-interactions.
Preview
Range Value: 40
Installation
pnpm dlx brutx@latest add sliderUsage
import { Slider } from "@/components/ui/slider"
<Slider defaultValue={[50]} max={100} step={1} />Examples
Disabled State
Disabled sliders prevent pointer inputs, scale hover animations, and inherit a semi-transparent opacity layout.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | number[] | - | Initial slider thumb value array. |
| max | number | 100 | Maximum allowed numerical value. |
| step | number | 1 | Step increment value. |
| disabled | boolean | false | Prevents slider interaction. |
Accessibility
Keyboard Navigation Key Rules:
ArrowRight / ArrowUp: Increments the value by one step.ArrowLeft / ArrowDown: Decrements the value by one step.Home: Sets the value to its minimum.End: Sets the value to its maximum.