Where can I find a javascript slider bar widget?

September 30, 2006 12:55 PM

I need a javascript slider bar widget with a couple of special features.

It's easy enough to find a simple slider bar implementation, but I need something that can do the following things:

1. Have multiple sliders on the same page.
2. Constrain the possible values for all sliders to a single total. What I mean is that if I had three sliders, the values of all three would add up to no more than, say, 100. So, if sliders A, B & C were all at 33, and I moved slider A to 43, then sliders B & C would each automatically re-adjust to 28.
3. In a perfect world, I would be able to add or subtract sliders from the page by pushing a button.

I guess I could do this myself in javascript, but I'd rather find somebody else who had done it already and licensed it. I know I've seen controls like this on the Web, but now that I need to find one I'm having no luck.

posted by Hildago to Computers & Internet (2 answers total)

[1]

I've used the free Yahoo! UI Slider to add multiple sliders on one page. Email me if you'd like to see a demonstration of this in action.

The key is to name each slider differently, and I had to modify the JS functions to use my programmatically-named slider widgets. I can email code if you like.

[2]

Each slider returns a value into a specifically named variable. On a slider Update event, you can simply run a function that updates the other named variables to take the value of a fraction of the difference (difference/2 for three sliders, difference/3 for four, etc.).

[3]

If you use PHP or another scripting language, along with the hidden CSS attribute, you can programmatically create hidden slider <div> elements, with names that are programmatically incremented by 1:

Slider 1 -- [+ onClick=show(Slider_2) ]
Slider 2 -- [+ onClick=show(Slider_3) ] etc.

You would place a [+] button next to an existing slider, which contains an onClick call to unhide the next slider.

An explanation of hiding/showing <div>'s is located here.

I haven't done this for sliders but I have done this for other chunks of HTML, and the code is along the same lines as described in [1], as far as using a scripting language to automatically write the neccessary hidden <div>'s
posted by Blazecock Pileon at 1:14 PM on September 30, 2006

Have multiple sliders on the same page.

Get rid of global variables, and instead use per-instance member variables.

Constrain the possible values for all sliders to a single total. What I mean is that if I had three sliders, the values of all three would add up to no more than, say, 100. So, if sliders A, B & C were all at 33, and I moved slider A to 43, then sliders B & C would each automatically re-adjust to 28.
"

onchange( newVal, aggregateTotalValue, totalSliders ) {
var totalOthers = aggregateTotalValue - newVal ;
var perOthers = totalOthers/totalsliders ;
// then reset all other sliders
// a more sophisticated implementation would scale the others, to retain their differences relative to each other
}

In a perfect world, I would be able to add or subtract sliders from the page by pushing a button.

Again, if you make slider a class, you can use operator new to create additional sliders. In this case, I'd use some class static variables to keep track of the total number of sliders, and to handle updating all sliders on a change in one.

It's interesting enough that I'd like to implement it just for the fun of it, but I'm just too busy right now.
posted by orthogonality at 1:14 PM on September 30, 2006