arantius.com

Here's a fix to make sure the slider works with adjusted margins:

function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}


Then modify "setSliderByClientX"
var p = (clientX-findPosX(slider))/(slider.scrollWidth + 10 );

There is a small problem with mouse events in FireFox. Try using the sliders with dropdowns on the same page. In Firefox, you can't select a dropdown item with the mouse. The problem is that the MouseUp event is not properly checking if a slider is active.
To fix the problem, change the addAnEvent(...) call in the attachSliderEvents() function:

addAnEvent(document, 'mouseup', function(e){
var el=sliderFromEvent(e);
if (!el) return false;
if (activeSlider

In the example the slider increments by .001 does anyone know how to set the slider to increment by 100 or 10000?

Thanks

I was using a different JS slider widget in a project and your version is much better, especially the "click to" a value. Much less code added to a template. Thanks.

BTW, geoff, in slider-setup.js, look at the last line in the setBoxValue() function.
Change:

b.value=(val);

to

b.value=Math.round(val);

This outputs whole values.

You can improve the cursor by adding this attribute to the img tag (the slider handle): style="cursor:ew-resize;"

Thanks for a great script ! One little thing I noticed is that due to the frankly weird & wacky way that the ParseInt function works in Octal, the script can't handle more than 7 sliders before producing an error. Tell the ParseInt function that you're counting in 10's by changing the line to : parseInt(divNum[1],10); Then it works all the time

P.S. for setting up all those sliders, I used a little loop (it's a bit more efficient once you have more than about 3 sliders on your webpage)