A notch above a monkey » Javascript slider

Javascript slider

I think HTML forms are probably the least well designed part of X/HTML specifications and at least some people agree. They were fine when they came out, but time has moved on and form elements just didn’t follow. There are too many things wrong with them, but personally I mostly miss a good control for date handling and a slider.

So here’s my take on a slider, implemented with javascript. You can also download this example packed in a zip.

It works at least in all major browsers, but I don’t consider it finished. However, since I haven’t found the time to finish it and I don’t think I will any time soon, I’ve decided to publish it anyway. It may be useful to somebody.

It’s fairly easy to use, if you can live with its limitations. You can create a horizontal or vertical slider. I believe example is self-explanatory, but if you find it difficult to use, please let me know and I’ll help.

Couple of things to remember. Code expects to find an image of button in subdirectory img and it shouldn’t be bigger than this one. If you need a different size, just correct javascript.

Also addEvent and delEvent functions in slider.js should be replaced with something more robust, when ppk’s team declares a winner.

Comments (4)

  1. hi,its nice….but i want a two knob slider with mouse up event..can anyone help me…

    Comment by joby p p — #
  2. While script is really nice, there is small issue with scale. If you set e.g. size in 5 and initial value will be 5 than after slider moved you will have only 4 as a maximum possible value.

  3. Nice work. Unfortunally you forgot to add any license, so its unusable for anybody who cares not to infringe copyrights. (And please don’t write “do whatever you want”, since this isn’t a valid allowness in some countries, please do pick and add an OpenSource license)

    Comment by axkibe #
  4. OK. Then it’s in public domain or under MIT license, whichever suits you better (let me know if neither do).

    Comment by markos #

Sorry, the comment form is closed at this time.