I want to create a very simple range picker, but I'm having 3 problems 1. the HTML range tag works only on chrome and safary. how can I create one that works on other browsers?
How do I make it vertical?
How can I control the scrolled button itself? I want to change it's image, and to change it's size according to the scrolling.
thanks
Range tag is html5 defined element. As you know, html5 is not fully supported in all browsers, so for the time being, it's best to use alternative, like jquery which is the safest way to be browser compatible.
Your first question for the vertial slider: http://jqueryui.com/demos/slider/#range-vertical
As to your second question, it's really best to use custom control. Using the jquery range slider, you can hook up to the slider events and change the property of some element according to the value. Look up the api for the slider. Check out how they do it with changing the color value. You can do the same with changing the size of an image for example. http://jqueryui.com/demos/slider/#colorpicker
In a general sense, your best bet is forgoing the <input type="range"...> form field and opting for the jQuery UI range slider.
JQuery UI has an extensive library of form elements and I think they are also backward compatible with older versions.
Try this URL: http://jqueryui.com/demos/slider/#range
