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?

Solution

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 :)