search

fryn / html5slider

<input type=range> polyfill for Firefox
http://fryn.github.io/html5slider/
180 stars 48 forks source link

Vertical slider #11

Closed computurus closed 11 years ago

computurus commented 11 years ago

How to achieve a transformation to a vertical slider instead of a horizontal one?

Hanzofm commented 11 years ago

I´m interested in this.

The css property '-moz-appearance': isMac ? 'scale-horizontal' : 'scalethumb-horizontal' allows to transform the button in vertical button but the slider bar stills horizontal

computurus commented 11 years ago

Does this just transform the slider visual apperance or does it transform also the working motion?

fryn commented 11 years ago

This is not supported and is not planned to be supported. See https://github.com/fryn/html5slider/issues/8

fryn commented 10 years ago

Update: Firefox 23 was released today, and it has built-in support for <input type="range" />, so this polyfill is no longer needed. http://caniuse.com/input-range

To make the slider vertical in Firefox, Chrome, and Safari, use <input type="range" orient="vertical" style="-webkit-appearance: slider-vertical;" />. The orient attribute is recognized by Firefox, whereas -webkit-appearance is recognized in Chrome and Safari.