Dot.SYSTEM

Slider

Granular value selection. Sliders allow users to choose a value from a range by moving a thumb along a track.

Usage

Use Sliders for settings that don't require an exact numerical value (e.g., volume, brightness, or price range filters). They provide immediate visual feedback of where the current value sits within the bounds.

Content

Price Filter

Adjusting a value range.

Intensity50%

Spec

  • Primitive: Built on `@radix-ui/react-slider`.
  • Track: #E5E5E5 background, 8px height.
  • Range: Brand Primary (#D74D0F) highlight.
  • Thumb: White background with 2px brand primary border.
  • Interaction: 110% scale on hover, 95% scale on click.

Anatomy

SLIDER SYSTEM