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

【问题标题】：How to make a custom input range slider如何制作自定义输入范围滑块
【发布时间】：2017-08-09 19:42:35
【问题描述】：

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

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

【问题讨论】：

css-tricks.com/…
@fix 你能不能给个工作演示

标签： html css input slider range

【解决方案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 块

【讨论】：

没有考虑 Chrome 以外的浏览器，它与请求的图像不完全匹配。 Slider-bar 仅填充示例中选定的 tic。

【解决方案2】：

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

【讨论】：