Lightweight Javascript Slider Control

2005-02-20 11:21 - Programming

As I mentioned a little while back, I wrote a simple javascript slider control to fulfil a dream I had for some time to allow resizing of flash movies/games while they are playing. It's very simple, on purpose. It's only 2,620 bytes of javascript code, 499 bytes of CSS, and around 500 bytes of script to set up the slider that can change for each page (or each slider in a page).

As of the update on March 12th, it's now 4,211 bytes of javascript, including 1,267 in the license block. Read the first comment below for links to the source.

All said and done, it's tested working on Firefox 1.0 and WinIE6. There are some problems on IE, though, with dragging. (Fixed in the update.) Clicking to a value works well. Most likely works in any other modern browser. For a preview, take a look at any of the flash games on my site.

Comments:

New example
2005-03-11 10:26 - arantius

Here's an extra online example of how the slider works. It's very plain but view source and you can see how it all works. The slider-setup.js is very important. The javascript slider control example has all the source files and of course example.html.

Problem with slider and left margins
2005-11-24 01:14 - osterman
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 );
Fix for mouse problems in Firefox
2006-03-21 19:28 - lchasteen
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
Bug fixed
2006-03-21 21:56 - arantius

Thank you lchasteen for catching that bug! That's not quite how I fixed it, but that definetly was a silly oversight on my part.

Incrementing
2007-04-18 03:12 - geoff

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

Thanks

very nice widget
2007-04-20 09:02 - mtjo

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.

small improvement: change the cursor when they hover over the slider handle
2007-09-29 23:17 - vivaldi

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

Using more than 7 sliders
2008-01-22 08:26 - grissom

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)

Post a comment:

Username
Password
  If you do not have an account to log in to yet, register your own account. You will not enter any personal info and need not supply an email address.
Subject:
Comment:

You may use Markdown syntax in the comment, but no HTML. Hints:

  • An empty line between text will create a paragraph boundary.
  • Use angle braces around a plain URL to auto-link it: <http://www.example.com/>.
  • Use this format to create a link with different text showing: [An Example](http://www.example.com/).
  • Use backticks (``), not leading spaces to enclose a code block.

If you are attempting to contact me, ask me a question, etc, please send me a message through the contact form rather than posting a comment here. Thank you. (If you post a comment anyway when it should be a message to me, I'll probably just delete your comment. I don't like clutter.)