How to customize vertical input range

Question

I was following this tutorial to customize vertical input range, but I don't know how to achieve the same result with vertical input.

I tried to add transform: rotate(270deg); rule, but it didn't help.

jsfiddle

body {
    padding: 30px;
}
input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 5px;
    
    /* transform: rotate(270deg); */
}
input[type=range]::-webkit-slider-runnable-track {
    width: 5px;
    height: 300px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
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]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

<input type="range">

Possible duplicate of [How to display a range input slider vertically](https://stackoverflow.com/q/15935837/4543207) — Redu, Sep 06 '17 at 15:54
Why dont you use jQuery ui slider https://api.jqueryui.com/slider/#option-range , it is highly customizable — Ananthakrishnan Baji, Sep 06 '17 at 15:55
I changed `input` `width` and `height` and that is the reason why it didn't work. — Matt, Sep 06 '17 at 16:47

score 3 · Accepted Answer · answered Sep 06 '17 at 15:50

3

What you could do is just use the same code from the tutorial, but then add transform:rotate(90deg); and transform-origin: left; to input[type=range] to rotate it vertically.

answered Sep 06 '17 at 15:50

cnrhgn

703
4
18

How to customize vertical input range

1 Answers1