Scrubber
Animated React scrubber slider component with spring-physics thumb, label, value display, and tick marks for design tools.
Opacity
0.40
Scale
1.5
Rotation
45
Installation
npx smoothui-cli add scrubberFeatures
- Dark, self-contained slider with built-in label and value display
- Animated thumb that appears on hover and drag with spring physics
- Subtle scrub indicator for position feedback at rest
- Configurable tick marks for visual reference
- Keyboard accessible (arrow keys, Home, End)
- Supports controlled and uncontrolled usage
- Respects
prefers-reduced-motion
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
ArrowRight / ArrowUp | Increases the value by one step |
ArrowLeft / ArrowDown | Decreases the value by one step |
Home | Sets the value to the minimum |
End | Sets the value to the maximum |
ARIA Attributes
| Attribute | Element | Purpose |
|---|---|---|
role="slider" | Track element | Identifies the component as a slider |
aria-label | Track element | Provides an accessible name (uses the label prop) |
aria-valuemin | Track element | Communicates the minimum value |
aria-valuemax | Track element | Communicates the maximum value |
aria-valuenow | Track element | Communicates the current value |
tabIndex={0} | Track element | Makes the slider focusable |
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the thumb capsule animation uses instant transitions instead of spring physics.
Props
Rich Popover
Animated React popover component with media content, action lists, and smart positioning powered by Radix UI and Motion.
Scrollable Card Stack
Interactive stacked card carousel with scroll-snap navigation and smooth parallax reveal animations. Touch-friendly React component for showcases and galleries.