自定义输入范围滑块及其指针

Question

我正在使用我网站上的范围滑块，通过使用＆＃34;范围＆＃34;来显示图像缩放和缩小。选项，但我想将其更改为垂直滑块，并希望显示自定义的拇指按钮

<input class="zoom-range vertical" type="range" orient="vertical" step="0.05" min="0.1" max="1">

用于不同浏览器的css，如

input[type=range].vertical
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 0px;
    height: 100px;
    margin-top: 20px;
}

上面的css会将滑块作为垂直方向但是如何更改指针颜色并隐藏滚动条的宽度？

我正在使用这样的滑块

我想制作我的滑块，如下所示

请帮我解决这个问题

它适用于Firefox但是对于chrome浏览器，如果我将使用属性

input[type=range]::-webkit-slider-thumb {
    background: blue;
    -webkit-appearance: slider-vertical;
}

这两个不适用于chrome中的指针。如果我将-webkit-appearance: none;，那么指针颜色正在改变

Answer 1

试试这个css：

input[type=range] {
    -webkit-appearance: none; // important
    margin: 18px 0;
    width: 100%;
    transform:rotate(90deg); //for vertical slider
    outline:none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 1px;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    background: #BFBFBF; // you can change it accordingly
    border-radius: 1.3px;
}
input[type=range]::-webkit-slider-thumb {
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #004C8F; //Your preferred color
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -14px;
}

演示：http://jsfiddle.net/esvqpkbf/

Fiddle也有mozilla的CSS，你可以相应地修改它。