Question

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?

1. How do I make it vertical?

2. 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

Answer 1

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