Similar Windows scale on HTML

Question

I am trying to obtain a scale item similar to the one from Windows .

However everything I search on the web only refers to scaling divs, images, etc.

What I want is this scale and everytime I move it the value changes.

Does anyone have any idea how can achieve this?

Answer 1

You have <input type="range"> which now has a wide support (http://caniuse.com/#search=range).

The use of this is as follows: You need to specify a range of values from min to max like this:

<input type="range" min="0" max="100">

Also, I strongly recomend you to write the value with javascript if you want the user to get exact values. And, if this is for zooming purposes, you can even define a step attribute, so that, for example it goes in intervals of 25.

Edit: if you need a wider support (ie8 and 9 mostly), you'd need to use other tool like jquery ui or to make your own slide.