Custom control slider built on top of a native slider (Accessible faked slider)

This slider uses an actual <input type="range"> behind the scenes. This is what keyboard and touch + assistive technology users interact with. Mouse/stylus/touch users interact with the fake sliders.

Both the fake slider and the input are kept in sync via JavaScript. This is in preference over the ARIA 1.1 Slider pattern, since that pattern has known issues in touch + AT scenario (where AT will announce control behaviors that simply can't be done via JavaScript at the moment, such as "use volume keys to adjust" or "swipe up or down with one finger to adjust the value", which do however work with real range inputs). See also the larger discussion on touch/mobile support for certain ARIA patterns.

Overall you should style the native <input type="range">, but if you have to use a custom approach then use a real (but hidden) range input approach.