Skip to content
Pinky UI

Tactile Range

`TactileRange` refines a native slider with restrained thumb feedback, fill and optional formatted output. Use it for volume, intensity, price or bounded numeric preferences.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

Purpose

TactileRange refines a native slider with restrained thumb feedback, fill and optional formatted output. Use it for volume, intensity, price or bounded numeric preferences.

Choose meaningful min/max/step values and always provide a label. Avoid precision-heavy financial entry, unbounded values or exaggerated spring travel that makes the thumb feel inaccurate.

Native keyboard and touch behaviour remain the source of truth. Reduced motion keeps an immediate thumb. Show the current value when users need precision, and pair with a numeric input when exact entry is important.

Source: packages/skills/forms/tactile-range.md