8

I'm looking for a JavaScript control that is a Range Slider (dual knob) that:

  • does NOT use an existing JS framework (e.g. dojo, jQuery, etc.) - unless you can roll/create your own sub framework where I can compile in just the components I need.
  • works in all major browsers

An example a Range Slider is below, but of course this uses jQuery - so this is not an option because even if I built jQuery only including the components I need (jQuery UI core + Slider) it's 140kb MINIFIED:

http://jqueryui.com/demos/slider/#range

vsync
  • 118,978
  • 58
  • 307
  • 400
  • 4
    Why the requirement that it not use a framework? "Works in all major browsers" is the primary reason frameworks exist. – Ben Blank May 18 '09 at 16:23
  • @Ben Blank - I'm from the school of thought that you shouldn't require a user to download code that they won't use. If I used a JS framework, probably 90% of the framework would go unused. So if the JS framework can be used to "roll/create" your own sub-framework where it only includes the exact components needed - that would work –  May 18 '09 at 17:05
  • @Hank892 the problem with that logic, which there is nothing wrong with, but in this case what you are asking is a complex UI function in JS, that is going to require a lot of foundation work to have it work correctly. So you are guaranteed extra JS unless you roll your own for this specific case. – Nick Berardi Jun 10 '09 at 17:03
  • I just stumbled upon this ranged slider today. I haven't used it, but it looks like they have a strong focus on accessibility which may or may not be important to you. Seems to work pretty well, though. http://www.paciellogroup.com/blog/misc/samples/aria/slider/doubleslider.html – mikefrey Jun 27 '10 at 03:20
  • 3
    2 years later, this seems to be a good candidate: http://refreshless.com/nouislider/ – jrochkind Dec 03 '12 at 23:00
  • The page that Freyday is referring to is gone, unfortunately, but the source code (with examples) can still be downloaded at http://files.paciellogroup.com/blogmisc/samples/aria/slider/tpgSlider_source.zip – redburn Sep 19 '13 at 22:24
  • I've created a [multi-range slider](https://github.com/yairEO/ui-range) entirely from CSS (super lightweight!) – vsync Jul 17 '22 at 07:59

3 Answers3

5

jQuery UI has a nice one:

http://jqueryui.com/demos/slider/

Nick Berardi
  • 54,393
  • 15
  • 113
  • 135
  • Yeah, I noticed JQuery one but: 1) it leverages an existing JS framework which I don't want, 2) most important - it's a single slider (only 1 handle) - I'm asking about a dual slider (with 2 handles) –  May 18 '09 at 12:47
  • 4
    You didn't dig very deep. :) It is a multi slider, http://jqueryui.com/demos/slider/#range, too. These are very complex so you are going to find it problematic to find one that doesn't leverage a current framework. Yahoo has one, ExtJS has one, jQuery has one, but they are all built off the core UX framework in each JS Framework. – Nick Berardi May 18 '09 at 12:50
  • 1
    http://jqueryui.com/demos/slider/#range with jquery + this slider plugin, it'll be ~75kb of scripts – John Boker May 18 '09 at 12:50
  • @John Boker - exactly. Seems crazy to have ~75kb download of JavaScript (which blocker HTML rendering) simply to have a slider. –  May 18 '09 at 12:57
  • 3
    You can try Yahoo or ExtJS which weight in at the same or more. If you are worried about size, just make sure it is cached properly so they only have to download it once. Use your own CDN or Google's http://code.google.com/apis/ajaxlibs/documentation/ to make sure that everything is coming through correctly. – Nick Berardi May 18 '09 at 13:08
  • 1
    Again, I DO NOT want to use an existing JavaScript framework. I want this to be as lean an mean as possible. –  May 18 '09 at 13:10
  • 3
    Your Javascript doesn't have to block HTML rendering. You can simply put the script tags at the bottom of the page and it won't try loading them until then. Wherever the slider is meant to go on the page can just be disabled until the Javascript loads. This is 2009, 75kb for what you want is not bad. – Paolo Bergantino May 18 '09 at 16:16
  • 3
    @Hank892 — I have to say, this sounds a bit like premature optimization. Not only is 75k really too little to be worried about (most pages' images are several times that much), but if you use major CDN (or Google APIs), users won't even have to download the 75k; they're practically guaranteed to have a copy cached already. – Ben Blank May 18 '09 at 16:27
  • @Ben - it's really not an optimization per se as to simply be under the mindset of "why have users download code that will never be used". If JQuery has a method to allow me to roll my own version of JQuery that only uses the components I need - that would be great and a viable option. –  May 18 '09 at 16:51
  • 3
    jQuery UI allows you to configure the code. http://jqueryui.com/download You're giving yourself a silly false constraint, especially if you use a Google API or CDN. Their prevalence means your users *have already* downloaded the code elsewhere. So why not use it? Rolling your own would just require the user to download MORE code on top of what they already have. – Mark Hurd May 18 '09 at 18:49
  • @Mark Hurd - jqueryui.com/download is great! do you know which elements I need if I want to use the JQuery Slider (http://jqueryui.com/demos/slider/#range) ? –  May 18 '09 at 19:02
  • 2
    You should just need the UI Core and the Slider control (under Widgets). Or, just grab it all from here (http://code.google.com/apis/ajaxlibs/documentation/index.html#jqueryUI) as there's a high probability many users will already have it cached. – Mark Hurd May 18 '09 at 19:18
  • 1
    Forgot to mention, and should go without saying, but you'll need jQuery too. – Mark Hurd May 18 '09 at 19:19
  • @Mark Hurd - holy crap. Using just the JQuery UI + Slider, it's 140kb MINIFIED :( And if I were to include everything it would be 300kb minified :( –  May 18 '09 at 20:01
  • that is why the Google API's are so great, chances are a user is going to come to your site with it already downloaded, and if they don't they only have to do it once. We are no longer talking about 65K modems, average web users today have a megabyte per second or more in speed. You will be fine, and it will make your life so much easier. – Nick Berardi May 19 '09 at 01:45
2

YUI 3 (which is currently in preview release) only pulls in the absolute minimum amount of code required to do what you ask. Their basic slider example (http://yuilibrary.com/yui/docs/slider/slider-basic.html) only pulls in 24k of JavaScript and less than 1k of CSS. It's pretty slick.

disclosure: I work for Yahoo!.

Liudmil Mitev
  • 464
  • 2
  • 6
  • 1
    @Potch That's pretty slick. However, does YUI 3 support a dual handle slider? Your link appears to be just for a single handle slider. – TeddyR Jul 08 '10 at 04:42
0

Use the slider code from http://www.walterzorn.com/dragdrop/dragdrop_e.htm#addons. It's a single handle but the underlying drag-drop.js is very flexible. You just need to add your own second slider and programmatically lock each bars' min-max range based on the position of the other. You're looking at 1 12kb (lgpl'ed) script include and about 10-20 lines of code to implement this.

SpliFF
  • 38,186
  • 16
  • 91
  • 120