-1

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?

Naughty Fox
  • 13
  • 1
  • 4
  • Possible duplicate of [jQuery custom draggable control slide without jQuery UI](http://stackoverflow.com/questions/12767844/jquery-custom-draggable-control-slide-without-jquery-ui) – TheCrazyProfessor Oct 07 '16 at 05:11

2 Answers2

0

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

Community
  • 1
  • 1
Gee Bee
  • 1,794
  • 15
  • 17
  • Thank you very much. I've found amazing solution In your last link. Here this sweetie http://jsfiddle.net/LucP/BPdKR/2/ – Naughty Fox Feb 10 '16 at 15:44
0

A very minimal slider. For IE and Microsoft Edge.

html:

<input type="range" />

javascript:

::-ms-thumb {
    height: 20px;
    background: green;
}
::-ms-track {
    height: 2px;
    color: transparent;
}

enter image description here

pollaris
  • 1,281
  • 17
  • 20