Slider accompanied by accessible dropdown

This isn’t a new idea on the web, but I found the details of a solution to my particular challenge spread out over the net, so I’ll consolidate my findings here.  
 
Ugly dropdown

Ugly dropdown

The task was to make an ugly dropdown of values look better. Immediately I went into mobile-first mode and thought of a slider, but sliders have always been a sticking point for accessible browsers. After poking around, I found a stackexchange thread that suggested linking a slider alongside an accessible input (text field or dropdown). I liked the approach; I wouldn’t be eliminating the dropdown in the name of accessibility, but if you’re down (haha) with using the slider, you won’t open the dropdown and see the long list of values hidden within. Also, the double-up on UI will benefit each other, with the dropdown displaying a more specific value of where you are on the slider’s spectrum. The approach is full of win.  
 
Slider with dropdown

Slider with dropdown


I liked how RangeTouch worked in a majority of browsers and linked it to a regular dropdown. Here it is in action:  
 

See the Pen Accessible slider by Brent Enarson (@benarson) on CodePen.

 
 
Posted in Web