<input type=range> coming to Mozilla

March 20, 2013 8 comments

I've been working on adding support for <input type=range> to Mozilla. This work is progressing well and <input type=range> is now turned on in the latest Nightly builds to help gather feedback from content authors. If you're interested in <input type=range> I'd love it if you could try it out and report any problems/make enhancement requests. Be sure to mention "<input type=range>" in the Summary field of any reports that you file, and add ":jwatt" to the CC field. I'm currently on vacation but I'll work through any issues that are reported once I get back next week.

To allow content author's to style <input type=range> there are currently two pseudo-elements, ::-moz-range-track and ::-moz-range-thumb. Very rough WIP documentation is here.

Known issues:

the default CSS styled appearance still needs work, and native theming (giving the slider the appearance of the operating system's theme) is still to come
vertical slider support is currently disabled until we decide how to allow authors to specify that they want a vertical slider (www-style discussion)
@list/<datalist> is not currently supported
there are rounding issues when the range's steps have fractional values

Tags: Mozilla

Archived comments

MattN

Thanks for improving our support of the new input types!

21 March, 2013 at 05:14

Dan Schroeder

I really appreciate your work on this--thanks!

11 May, 2013 at 16:19

Ivan

Hi,

Please, tell me how to suppress the dotted outline when range input control gets focused. I've experimented with pseudoclasses/pseudoelements: focus, moz-focus-inner, moz-focus-outer and moz-focusring but to no avail. My page is very simple, just a background image and one heavily styled range input control and the focus outline gets in the way.

29 June, 2013 at 22:58

Jonathan Watt

First, apologies for the delay in approving and replying to your comment. My blog comment spam filter has been broken. :-/

Right now you can't disable the focus outline I'm afraid. I've filed bug 932410 to make that possible.

29 October, 2013 at 18:24

Arush

Hey,

I'm really looking forward to mozilla finally supporting this. here's an example of something that I'd like to do in firefox but is not currently possible:

https://codepen.io/anon/pen/rpyAe

Any idea when this will be supported?

5 July, 2013 at 04:31

Jonathan Watt

That should already be possible with the new range support.

29 October, 2013 at 18:26

Anonymous

Coming when? It doesn't seem to be in ff 22.

29 July, 2013 at 20:35

Jonathan Watt

Firefox 23

29 October, 2013 at 18:26