6

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;
}
medCoder
  • 231
  • 1
  • 3
  • 7
  • 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 May 28 '13 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 May 28 '13 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 Sep 20 '13 at 19:06
  • Also have the same problem with the transform:rotate. the positionning changes according to the browser – estellechvl Nov 06 '14 at 17:25

1 Answers1

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

cube
  • 1,774
  • 4
  • 23
  • 33
  • 1
    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 – medCoder May 28 '13 at 16:51