使范围滑块垂直

Question

我正在尝试定制一个范围滑块根据我的需要我几乎在那里除了它的方向，目前它是水平对齐的，应该是垂直的。

我尝试添加data-orientation=“vertical”和orient=“vertical”以及

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

不走运。

当前代码库如下：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;
        }

标记

<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>

是不是我漏了什么？如有任何帮助，我们将不胜感激。谢谢

Answer 1

添加：

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

删除：

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

Answer 2

您正在查找以下外观css属性：

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

Answer 3

2件事

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

正在覆盖您的

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

此外，您需要翻转宽度和高度，以匹配垂直设计

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