Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make html5 slider (input type='range') work in Firefox

I try to use html5 element, which is

<input type='range' step='1' min='-300' max='-1' />

It is supposed to be a slider. It works in Chrome. But it does not work in Firefox8. I checked that in "html5test.com", it says firefox 8 partially supports the "range" type. It supports "min" and "max" attribute, but not "step" attribute. Then I erase the "step" attribute, like

<input type='range' min='-300' max='-1' />

Why it still does not work?

Is any way to let it work?

like image 236
Kurt Shaw Avatar asked Nov 07 '11 19:11

Kurt Shaw


People also ask

How do you input type range in HTML?

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the attributes below. Tip: Always add the <label> tag for best accessibility practices!

How do I create a vertical range slider in HTML?

For Chrome, use -webkit-appearance: slider-vertical . For IE, use writing-mode: bt-lr . For Firefox, add an orient="vertical" attribute to the html.


1 Answers

This is not supported in Firefox before version 23. For a Javascript implementation in versions 4 and up, please see http://frankyan.com/labs/html5slider/ .

According to Jonathan Watt's comment on the bug report linked above, support has been added to the Firefox development branch and was released with version 23.

like image 79
George Cummins Avatar answered Oct 13 '22 00:10

George Cummins