Slider Component

Overview

Slider uses spring motion so the fill and handle follow the chosen value and settle naturally. It supports single values and dual-thumb ranges, with optional value bubbles and rolling numbers so users see exactly what they picked.

Use it when users adjust a value within known limits and benefit from seeing its relative position, such as price filters, volume, temperature, or effect intensity. The spring gives it character, but accuracy always comes first.

Theme and Interaction Customisation

Set track roundness and thickness, rail value labels, dot or line step marks, and a bar, solid circle, outlined circle, or hidden thumb. Motion settings include spring duration and bounce, hover or drag thickening, elastic endpoint stretch, rolling numbers, and floating value bubbles.

Example Production Use Case

A coffee equipment store can offer a grind-size slider and a two-handle water-temperature range in its configurator. The bubble shows each value as customers drag, and the fill makes the chosen range obvious.

An ecommerce category page can use a dual-thumb price filter, with rolling numbers updating as shoppers narrow results.

A creative tool can use smooth-mode sliders for opacity and blur, with track thickening on hover making small adjustments easier to grab.

Best Used For

• Product configuration with numeric preferences.
• Ecommerce price and size filters.
• Audio and media controls.
• SaaS thresholds, percentages, and limits.
• Creative tool values like opacity and spacing.
• Smart-device temperature and brightness.
• Interactive calculators.

Not For

For a few unrelated options that don’t form a scale, use Radio or Dropdown Menu.

When users need an exact value, such as money or measurements, pair the slider with a numeric input or use the input alone.

Avoid it when the scale is unclear, and never let moving a handle trigger an irreversible action without confirmation.

Performance Budget

Keep dragging responsive, animate the fill and thumb with efficient properties, and never delay the real value behind the spring. Avoid app-wide re-renders on change, and separate instant slider feedback from expensive calculations that depend on the value.

Accessibility and Mobile

Use native range semantics with a label, min, max, current value, and arrow-key support, giving each range handle its own name. On mobile, keep handles easy to grab and separate, don’t let stretch fight page scroll, and state units in text. With reduced motion, remove overshoot, stretching, and rolling numbers.

Common Mistakes

• Letting the fill or thumb drift from the actual value.
• Allowing elastic stretch to produce out-of-range values.
• Choosing smooth or stepped mode without considering precision needs.
• Making range handles hard to tell apart.
• Hiding the exact value.
• Using horizontal-only or thumb-specific effects where they don’t apply.
• Using excessive spring bounce.
• Making dragging the only way to change values.