How to customize only with css for html5 input range slider-vertical?

Question

I would like to customize the look of a html5 input[range] when it's vertical.

Want to avoid CSS 3 directive like transform:rotate, it complicates the UI layout then.

Webkit css properties are recognised in my context, the others vendors are useless in my case.

The customisation works good for the horizontal default slider, but not for the vertical one, you can look at here :

jsFiddle : http://jsfiddle.net/QU5VD/1/

Otherwise, here's the code :

HTML

<input type="range" class="vHorizon" />

<input type="range" class="vVertical" />

CSS

input[type="range"].vHorizon {
   -webkit-appearance: none;
   background-color: pink;
   width: 200px;
   height:10px;
}
input[type="range"].vVertical {
   -webkit-appearance: slider-vertical;
   background-color: pink;
   width: 10px;
   height:200px;
}
input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   background-color: red;
   width: 20px;
   height: 20px;
}

a trick that I know is to use transform: rotate(90) on horizontal one. But its a dirty trick and I won't advice to use it. But still its good to know it. — Sourabh
– Sourabh, Commented May 28, 2013 at 16:27
Thks, yes for several reasons, it's not a such good trick (have to care position, it makes CPU work (embedded software)) — medCoder
– medCoder, Commented May 28, 2013 at 16:48
Hi, I'm facing the same issue and I'm wondering if anyone have found a better solution for this. Using rotations brings the slider positioning totally out of control :( — Massimo Callegari
– Massimo Callegari, Commented Sep 20, 2013 at 19:06
Also have the same problem with the transform:rotate. the positionning changes according to the browser — estellechvl
– estellechvl, Commented Nov 6, 2014 at 17:25

cube · Accepted Answer · 2013-05-28 16:45:36Z

7

******UPDATED ANSWER****

If i understand you correctly, you are trying to make you vertical look like what your horizontal looks like? if so:

    input[type=range].vVertical {
    -webkit-appearance: none;
    background-color: green;
    width: 200px;
    height:10px;

      -webkit-transform:rotate(90deg);       
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    z-index: 0;
}
input[type=range].vHorizon {
    -webkit-appearance: none;
    background-color: pink;
    height: 10px;
    width:200px;

}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: red;
    width: 20px;
    height: 20px;
}

fiddle <--UPDATED

edited May 28, 2013 at 16:45

answered May 28, 2013 at 16:22

cube

1,8024 gold badges25 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

medCoder Over a year ago

Your trick works, but like I said and I should have asked in my question, I would like to avoid css transform workaround. It brings position and other' issues

Collectives™ on Stack Overflow

How to customize only with css for html5 input range slider-vertical?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related