Naughty Fox Naughty Fox - 1 year ago 69
jQuery Question

How to create a range slider without plugins and Jquery UI?

I try to study javascript and stuck. I want to understand how make a range slider by myself. But everyone uses plugins and libs like jquery UI. or tries stylize input type="range", although this does not supported in IE9. It's good and simple but i want improve my skills. I can't find tutorial about this subject.
May be somebody knows something about this?

Answer Source

Just some trivial hints:

  • have a div, which is the body of the slider
  • have a floating div on top of that, which you can drag with your mouse
  • implement dragging code on the floating div (ensure it remains in the slider area)
  • in this same code you can do some sort of calculations, and calculate a "value" for the slider, e.g. in percent.

Of course you can pick a ready-made slider lib such as http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html and learn more about the implementation.

This is also quite light: http://skidding.github.io/dragdealer/

Another workaround is actually creating something which is not a slider. But something similar. At the bottom of this> Is there a simple JavaScript slider? you can see a screenshot of a segmented volume control. That is in fact just a set of images with mouse events on top of it. Nothing fancy, not nice, but on the other hand works with any browser since JS has been invented :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download