Ana demonstrates how to achieve a range slider effect accessibly, using web standards and without needing to reach for libraries.
As Ana’s tweet explains, this offers a number of features and benefits:
- can drag thumb with JS disabled
- receives focus
- keyboard navigation
- clicking track moves thumb there and changes slider value
- seen as slider in Accessibility panel
- no library needed, so less code in total