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

Question

我想创建一个自定义滑块，如图中所示。我怎样才能做到这一点？请查看我已经链接的小提琴，以便您可以看到我已经尝试过的内容。

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

Answer 1

虽然您希望在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块

Answer 2

您可以使用javascript库将输入元素替换为简单的样式元素，例如JCF。查看他们的demo page.