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