如何创建自定义输入滑块？答案

【问题标题】：How to create custom input slider?如何创建自定义输入滑块？
【发布时间】：2022-11-21 19:13:06
【问题描述】：

我有一个关于在字段本身内创建自定义输入滑块标签的问题。

输出应类似于以下屏幕截图：

我已经完成了输入字段部分，但是缺少标签和白色部分。

.slider-container .slider {
  -webkit-appearance: none;
  overflow: hidden;
  width: 100%;
  height: 50px;
  border-radius: 30px;
  background: #b5b33c;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider-container .slider:hover {
  opacity: 1;
}

.content .slider-container .slider::-webkit-slider-runnable-track {
  height: 50px;
  -webkit-appearance: none;
  color: #13bba4;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  background: #54565a url("https://i.imgur.com/OuvOpHG.png") 50% 50% no-repeat;
}

.slider::-moz-range-thumb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  background: #54565a url("https://i.imgur.com/OuvOpHG.png") 50% 50% no-repeat;
}

<div class="slider-container">
            <input
              type="range"
              min="1"
              max="1000"
              value="50"
              class="slider"
              id="range"
            />
          </div>

【问题讨论】：

内置的滑块非常有限，而且是特定于浏览器的，如果你想做这样的事情，我肯定会推荐构建你自己的 UI 并使用 JS 将它“附加”到幕后隐藏的滑块。
@DBS 是的，我同意这一点，我认为将 position 应用于标签具有相同的效果，但想知道是否有更清洁的解决方案。

标签： javascript html css

【解决方案1】：

Please check below demo link, where I have perform Javascript and CSS tweaks:

https://jsfiddle.net/kairavthakar2016/0kz6xtns/69/

如果您发现任何问题，请检查并告诉我。

【讨论】：

谢谢，我也尝试过类似的解决方案。但是，移动滑块时出现问题。白色背景在某些时候超出了拇指。
知道了。让我修改 CSS 调整。

【解决方案2】：

可以创建一个 onchange 函数来获取滑块值。该值可以通过输出标签获取。

HTML:

<div class="slider-container">
        <input
          type="range"
          min="1"
          max="1000"
          value="50"
          class="slider"
          id="range"
          onchange="getRangeValue()"
        />
<output id="rangeOutput">50</output>
</div>

脚本：

function getRangeValue() {
document.getElementById("rangeOutput").value = document.getElementById("range").value
}

【讨论】：

对于建议，您必须使用评论部分。答案部分是发布答案。