小编Gor*_*an 的帖子

我创建了一个简单的范围滑块。现在我想风格化步骤，做一个小圆圈。我也希望他们分配外部值，如下所示。正如你所看到的，我有很多类型的滑块......求助。

<input id="inp1" type="range" min="0" max="10" step="2" value="0">

这是我的滑块

但我想要这个

这是我的 HTML

<input id="inp1" type="range" min="0" max="10" step="2" value="0">

CSS：

input[type=range]::-webkit-slider-runnable-track { 
    width: 300px;
    height: 3px;
    background: #bfbfbf;
    border: none;
    border-radius: 2px;
} 

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #74B643;
    margin-top: -6px; 
} 

input[type=range]:focus {
    outline: none; 
} 

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}