A pen with a fun custom emoji slider that maintains accessibility by using divs hidden to screen readers for the visual styling, with a regular range-type input over the top of the styled input (thanks to CSS grid) at opacity 0. The end effect is that the user is actually interacting with the native HTML <input type="range"> element, but visually seeing the custom styled slider instead.
Top comments (0)