Slider

Use Sliders when the range matters more than exact values: volume, brightness, price filters. Use numeric Inputs when precision matters: age, quantity, measurements. Sliders are for approximate selection, Inputs for exact values.

Yes! Display the value either permanently next to the slider or in a tooltip on hover/drag. Users need feedback about their selection, especially for settings like price ranges ($50-$200) or volume (75%).

Yes! Range Sliders have two thumbs for selecting minimum and maximum values. Perfect for price filters ($20-$100), date ranges, or any scenario where users need to specify bounds rather than single values.

Set appropriate steps: 1 for integers (age: 18, 19, 20), 0.01 for prices ($19.99), 5 for larger ranges (0, 5, 10). Match step size to use case precision needs—finer steps give more control but are harder to hit on touch.

Yes, with keyboard support (arrow keys adjust value, home/end for min/max) and ARIA attributes announcing current value and range. Ensure sufficient contrast and touch target size (at least 44×44px) for usability.

Yes, this Figma Slider component matches the shadcn/ui implementation exactly, ensuring your range controls work consistently from design to production with proper interactions and accessibility.