javascript - 输入范围 slider 及其指针的自定义

Question

我在我的网站上使用范围 slider 通过使用“范围”选项来显示图像缩放和缩小，但我想将其更改为垂直 slider 并且还想显示自定义的拇指按钮

<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 将使 slider 垂直，但我如何更改指针颜色并隐藏滚动条的宽度？

我的 slider 是这样的

我想制作如下所示的 slider

请帮我解决这个问题

它适用于 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，你可以相应地修改它。