css 如何创建自定义输入滑块?

uqzxnwby  于 2022-11-27  发布在  其他
关注(0)|答案(2)|浏览(168)

我有一个关于创建自定义输入滑块字段内的标签本身的问题。
输出应如以下屏幕截图所示:

我已经做了输入字段部分,但标签和白色部分是失踪。
第一个

fslejnso

fslejnso1#

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

https://jsfiddle.net/kairavthakar2016/0kz6xtns/272/
请检查,如果发现任何问题,请告诉我。

vyswwuz2

vyswwuz22#

可以创建一个onchange函数来获取滑块的值,这个值可以通过output标签来获取。
于飞:

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

JavaScript语言:

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

相关问题