Making range slider vertical

Question

I am trying to customize a range slider according to my need i am almost there except for the orientation of it, currently it's aligned horizontally which should be vertical.

I have tried adding data-orientation = "vertical" and Orient="vertical" as well as

.input-range{
  writing-mode: bt-lr; /* IE */
  -webkit-appearance: slider-vertical;
}

got no luck.

current code base is as follows : Style

.input-range{
        writing-mode: bt-lr; /* IE */
        -webkit-appearance: slider-vertical;}
                * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .PrixMin {
        float: left;
        color: #164188;
        font-size: 19px;
        margin-right: 5px;
    }

    .selecteurPrix {
        padding-top: 15px;
        display:block;
        position:absolute;
        top:90px;
        left:0;
        z-index: 1200
    }

    body {
        font-family: sans-serif;
        padding: 40px;
    }       

    .range-slider {
        position: relative;
        width: 450px;
        float: left;
        margin-right: 5px;
    }


    @media (-webkit-min-device-pixel-ratio:0) {
        /* Non-IE styles here*/
        .range-slider .input-range {
            -webkit-appearance: none;
            width: 449px;
            height: 5px;
            border-radius: 5px;
            background: #ccc;
            outline: none;
          
        }
    }

    @media (-ms-high-contrast:none),(-ms-high-contrast:active) {
        /* IE styles here*/
        .range-slider .input-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: 450px;
            outline: none;
        }
    }

    .range-slider .input-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #164188;
        cursor: pointer;
        -webkit-transition: background .15s ease-in-out;
        transition: background .15s ease-in-out;
    }

                .range-slider .input-range::-webkit-slider-thumb:hover {
                    background: #164188;
                }

            .range-slider .input-range:active::-webkit-slider-thumb {
                background: #164188;
            }

            .range-slider .input-range::-moz-range-thumb {
                width: 20px;
                height: 20px;
                border: 0;
                border-radius: 50%;
                background: #164188;
                cursor: pointer;
                -webkit-transition: background .15s ease-in-out;
                transition: background .15s ease-in-out;
            }

                .range-slider .input-range::-moz-range-thumb:hover {
                    background: #164188;
                }

            .range-slider .input-range:active::-moz-range-thumb {
                background: #164188;
            }

        .range-slider .range-value {
            display: inline-block;
            position: relative;
            width: 100px;
            color: #fff;
            font-size: 23px;
            line-height: 32px;
            text-align: center;
            border-radius: 3px;
            background: #164188;
            padding: 5px 10px;
            margin-left: 7px;
        }
    ::-moz-range-track {
        background: #ccc;
        border: 0;
    }
    input::-moz-focus-inner {
        border: 0;
    }

    input[type=range] {
        margin: 2px;
    }

        input[type=range]::-ms-track {
            width: 450px;
            height: 5px;
            /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
            background: transparent;
            /*leave room for the larger thumb to overflow with a transparent border */
            border-color: transparent;
            border-width: 6px 0;
            /*remove default tick marks*/
            color: transparent;
        }

        input[type=range]::-ms-fill-lower {
            background: #ccc;
            border-radius: 10px;
        }

        input[type=range]::-ms-fill-upper {
            background: #ccc;
            border-radius: 10px;
        }

Markup

<div class="selecteurPrix">
    <div class="PrixMin"> -100</div>
    <div class="range-slider">
        <input class="input-range" orient="vertical" type="range" value="0" min="-100" max="100" step="25">
        
    </div> <div class="PrixMin"> 100</div>
</div>

Is there something i am missing here? any help would is appreciated. Thanks

Answer 1

2 things

@media (-webkit-min-device-pixel-ratio:0) {
    /* Non-IE styles here*/
    .range-slider .input-range {
        -webkit-appearance: none;
        width: 449px;
        height: 5px;
    }
}

Is overwriting your

.input-range{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical;
}

Also you need to flip the width and height to match the vetical design

.input-range{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical;
    width: 5px;
    height: 449px;
}

Answer 2

you're looking for this appearance css property:

.input-range { 
   appearance: slider-vertical;
   -moz-appearance: slider-vertical;
   -webkit-appearance: slider-vertical;
}

Answer 3

Add:

input[orient=vertical] {
  -webkit-appearance: slider-vertical;
  height: 450px;
  padding: 0 20px;
  width: 20px;
  writing-mode: bt-lr;
}  

Remove:

.range-slider {
  position: relative;
  width: 450px;
  float: left;
  margin-right: 5px;
}