Skip to main content

Simple input[type=range] styling, by Ana Tudor

Visit external resource

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
External Link Bookmark Note Entry Search