style not applies to thumb when it is vertical

Question

i am creating vertical range bar and i changed the -webkit-appearance : slider-vertical.

I also changed the input-range bar's properties such as height , width ,webkit-slider-runnable-track and webkit-slider-thumb properties.

all the input range properties changed except the webkit-slider-thumb. It was set to the default property. I even changed the webkit-appearance to none inside the webkit-slider-thumb.

online code: Jsfiddle

<head>
<style type="text/css">
input[type=range][orient=vertical] {
    -webkit-appearance: none;
    -webkit-appearance: slider-vertical;/*if we remove this slider-vertical then horizondally range bar styles applies correctly*/
    width: 10%;
    height: 40%;
}

input[type=range][orient=vertical]::-webkit-slider-runnable-track {
    background: yellow;  
    border: 1px solid black; 
}

input[type=range]::-webkit-slider-thumb {
 /*all the below  css properties **not** applies to thumb*/
  height: 3vmin;
  width: 3vmin;
  border-radius: 50%;
  background-color : black;
}
</style>
</head>

<body>
    <input type="range" orient="vertical">
</body>

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

I afraid it's not possible. See [Google chrome vertical <input type="range" /> ] for more info.

But there is a nice trick. https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/#comment-1586472

input[type=range][orient=vertical] {
    -webkit-appearance: none;
    /*-webkit-appearance: slider-vertical; /*if we remove this slider-vertical then horizondally range bar styles applies correctly*/
    width: 10%;
    height: 40%;
    transform: translateY(30px) rotate(90deg);
    transform-origin:bottom;  
}

input[type=range][orient=vertical]::-webkit-slider-runnable-track {
    background: yellow;  
    border: 1px solid black; 
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}

<input type="range" orient="vertical" />

edited May 23 '17 at 11:58

Community

1
1

answered Aug 31 '15 at 14:43

Mosh Feu

28,354
16
88
135

1

i knew that rotating 90deg will help , but that method makes so many layout issues , in responsive design rotating 90deg will create so many complexities. I have already tried that. But thanks for the response. – Siva Kannan Aug 31 '15 at 14:48
some properties like box shadow , cursor : pointer are working for thumb. But height , width , border radius properties not working. That's why i wonder what was wrong in my code. – Siva Kannan Aug 31 '15 at 14:51
Thanks for your sharing! Personally, I still prefer to use a plugin like `jQuery UI - slider` until this type will be better, – Mosh Feu Aug 31 '15 at 14:56

style not applies to thumb when it is vertical

1 Answers1

Linked