如何制作自定义输入范围滑块

-2

我想创建一个像图中所示的自定义滑块。我怎样才能做到这一点？请看我连接的小提琴，这样你就可以看到我已经试过的东西。如何制作自定义输入范围滑块

<h2>working slider input range</h2> 
 
<input class="slider-info" name="gdskill[1]" id="gdskill1" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output1.value = gdskill1.value" /> 
 
<output id="Output1">0</output> 
 

 

 
<input name="gdskill[2]" id="gdskill2" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output2.value = gdskill2.value" /> 
 
<output id="Output2">0</output> 
 

 
<datalist id="ticks"> 
 
    <option>0</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    <option>6</option> 
 
    <option>7</option> 
 
    <option>8</option> 
 
    <option>9</option> 
 
    <option>10</option> 
 
</datalist> 
 

 

 
<h2>I want a design like the one shown in the image above. Is this possible? Can anyone help me with it as I am a little new to CSS.</h2>

小提琴链接：https://jsfiddle.net/9qgx71kd/2/

来源

2017-08-09 Mr world wide

https://css-tricks.com/styling-cross-browser-comp atible-range-inputs-css/ – fix

@fix可以请你给一个工作演示 –

这是我在短时间内可以做的最好的事情，尽管你会想在IE和Firefox上测试。这可能需要一些调整，但应该是一个好的开始。

https://jsfiddle.net/9qgx71kd/3/

**** **** HTML

<input name="gdskill[1]" id="gdskill1" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output1.value = gdskill1.value" /><br /> 
<output id="Output1" class="output">0</output> 

<div> 
<input name="gdskill[2]" id="gdskill2" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output2.value = gdskill2.value" /><br /> 
<output id="Output2" class="output">0</output> 
</div> 

<datalist id="ticks"> 
    <option>0</option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>9</option> 
    <option>10</option> 
</datalist>

**** **** CSS

.output { 
    width: 100%; 
    margin-left: 50%; 
} 

input[type=range] { 
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ 
    height:5px; 
    width:100%; 
    cursor: pointer; 
    background: #07C; 
    margin-bottom: 10px; 
} 

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: 2px solid #07C; 
    height: 20px; 
    width: 20px; 
    border-radius: 20px; 
    background: #fff; 
    cursor: pointer; 
    margin-top: 0px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ 
} 

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

如果你想将阴影添加到拇指滑块，您可以将box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);添加到input[type=range]::-webkit-slider-thumb块

来源

2017-08-09 20:50:28 Ricktron3000

你能做的最好吗？它出什么问题了？ – Strawberry

没有考虑Chrome以外的浏览器，并且它与请求的图像并不完全匹配。在示例中，滑块条仅填充选定的tic。 – Ricktron3000

您可以使用一个JavaScript库，利用例如JCF容易造型元素更换输入元素。看到他们demo page.

来源

2017-08-09 20:30:53

如何制作自定义输入范围滑块

回答

相关问题