How to customize the HTML5 input range type looks using CSS?

Question

I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I\'ve tried applying some common CSS attributes using CSS class but it

Answer 1

jQuery Tools provides a plug-in that creates stylable elements from a range input, and what's more, makes it still work as a slider in older browsers that don't support input[type=range].

Allows you to style:

• the handle
• the slider
• optional progress fill
• value output field

I've used it many times and it's a great tool.

WARNING: doesn't work on touch devices. I don't have as much experience with it, but you could try the jQuery mobile slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

http://jquerytools.github.io/demos/rangeinput/index.html