Range sliders
Range sliders allow the user to select a value between a defined minimum and maximum range. They can work well for discovery and education, but because they’re imprecise and difficult to manipulate, are not the best choice when the user is likely to have a specific number that they want to input.
Standard range slider
Default state
Focus state
View this component in use on Planning your Social Security claiming age. After entering your date of birth and highest annual work income and then pressing the “Get your estimates” button, you will see an interactive chart with a range slider.
Use cases
Range sliders can work well for discovery and education, where the inputs are a relative quantity and not a specific numeric input. As an example, users can narrow a list of flight options on kayak.com with sliders that show a range of takeoff times. Sliders are an elegant and intuitive way to allow the user to discover which takeoff times will yield the lowest fares.
Because they’re imprecise and difficult to manipulate, range sliders are not a good choice when the user is likely to have a specific number that they want to input. If you choose to implement a slider in this latter case, consider adding steppers or an input box as an alternative means of entering the same data.
Also consider the balance between the length of the slider and the number of data points it covers (the range, as well as how discrete the points are). The more points to choose from, the harder it is for the user to target a specific number.
Accessibility
Make sure that sliders are accessible by keyboard using the arrow keys.