2

I'm looking for a plugin to enhance HTML5 input[type=range] - ideally would like the result to be similar to the jquery-mobile slider:

http://jquerymobile.com/demos/1.0b3/docs/forms/forms-slider.html

I've not found anything yet, quite surprised - seems like a nice standard way to enhance input[type=range]. Seems excessive roll my own, esp. when this functionality already exists in jquery-mobile! Has anyone come across something like this?

edit: I looked at the jQueryUI slider - its not what I want!

zack
  • 3,198
  • 2
  • 35
  • 51
  • Could you modify the jQuery Mobile slider to work with `input[type=range]`? As `input[type=range]` degrades to `input[type=text]` in older browsers I’d assume the modifications would be pretty simple. – Paul D. Waite Sep 13 '11 at 18:17
  • Why isn't the jQueryUI slider what you want? It's built from the same base as the jQuery Mobile slider, just styled differently. – Jason Kaczmarsky Sep 13 '11 at 18:50
  • @Paul D. Waite - well yes! .. take a look at: https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.forms.slider.js, appears to be quite heavily dependent on other parts of the jqm framework .. need to investigate further. Also looking at: https://github.com/fryn/html5slider - which works 'out-of-the-box' (but is a bit dirty).. – zack Sep 13 '11 at 18:50
  • @jason - check out the difference! jQueryUI slider doesnt offer the same functionality! – zack Sep 13 '11 at 18:51
  • The only thing that mobile does is it replace input[type]=range while the regular UI overlays on a div. Is that what you want? Other than that, the jQueryUI slider has many more options. I'm confused. – Jason Kaczmarsky Sep 13 '11 at 19:05
  • @Jason: Actually, I don't think the normal jQuery UI slider works in mobile browsers. I'm trying it on Android and you can't grab it, it just scrolls the screen. A real HTML5 range input does work though. – phreakhead Mar 04 '12 at 01:51
  • @zack Good Question. A year later i still don't see much progress here. Input type range is still not supported everywhere and even if: can't be styled correctly. Most plugins seem to be out of date, not leveraging CSS3... (e.g. jQuery UI and jQuery Tools) – Frank Lämmer Dec 17 '12 at 12:21

2 Answers2

1

You can try webshims lib. The script uses jQuery UI as a base, but modifys jQuery UI to make it comptibel with HTML5 specification. There is a demo, which only "polyfills" browsers without type=range support and a demo which overrides the default in all browsers.

The following content attributes are reflected by the polyfilled UI: value, disabled, readonly, step, min and max.

Aditionally you can also set/get the following properties programmatically using $.prop/[$.attr/]$.val: valueAsNumber, value, step, min, max, disabled, readonly

$('#range').prop('valueAsNumber'); //get valueAsNumber
$('#range').val('value', 10); // set value to 10
$('#range').prop('disabled', true);
alexander farkas
  • 13,754
  • 4
  • 40
  • 41
  • great work mr farkas! - looks like a nice lib :) Should be easy to build what I want based on that! – zack Sep 14 '11 at 11:32
1

http://flowplayer.org/tools/rangeinput/index.html

Razvan Cercelaru
  • 628
  • 5
  • 6
  • - a fix to make this work on touchscreen devices: https://github.com/jquerytools/jquerytools/issues/295 – zack Mar 04 '12 at 11:10