JavaScript range slider / dual slider exist withOUT using a framework

views:

3591

answers:

JavaScript range slider / dual slider exist withOUT using a framework

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

+4 A:

jQuery UI has a nice one:

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

Nick Berardi 2009-05-18 12:43:06

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)

2009-05-18 12:47:04

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 2009-05-18 12:50:11

http://jqueryui.com/demos/slider/#range with jquery + this slider plugin, it'll be ~75kb of scripts

John Boker 2009-05-18 12:50:24

@John Boker - exactly. Seems crazy to have ~75kb download of JavaScript (which blocker HTML rendering) simply to have a slider.

2009-05-18 12:57:05

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 2009-05-18 13:08:13

Again, I DO NOT want to use an existing JavaScript framework. I want this to be as lean an mean as possible.

2009-05-18 13:10:06

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 2009-05-18 16:16:50

@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 2009-05-18 16:27:46

@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.

2009-05-18 16:51:21

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 2009-05-18 18:49:41

@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) ?

2009-05-18 19:02:40

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 2009-05-18 19:18:20

Forgot to mention, and should go without saying, but you'll need jQuery too.

Mark Hurd 2009-05-18 19:19:56

@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 :(

2009-05-18 20:01:58

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 2009-05-19 01:45:46

+1 A:

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 2009-05-18 15:11:34

+1 A:

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://developer.yahoo.com/yui/3/examples/slider/slider_basic_clean.html) only pulls in 24k of JavaScript and less than 1k of CSS. It's pretty slick.

disclosure: I work for Yahoo!.

2009-05-18 21:17:35

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

Freyday 2010-06-27 03:20:55

@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 2010-07-08 04:42:35

ansaurus

tags:

views:

answers:

JavaScript range slider / dual slider exist withOUT using a framework

related questions