html html5滑块范围css

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html html5滑块范围css相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    body {
      padding-top: 200px;
    }
    input::after {
      content: attr(data-value) '/' attr(max);
      position: relative;
      left: 135px; top: -20px;
    }
  </style>
</head>
<body>
  <h2>from: http://www.htmlfivecan.com/#23</h2>
  <input type="range" min="0" max="100" value="25">
  <script>
    var input = document.querySelector('input');
    input.dataset.value = input.value; // Set an initial value.

    input.addEventListener('change', function(e) {
      this.dataset.value = this.value;
    });
  </script>

</body>
</html>

以上是关于html html5滑块范围css的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 滑块在 Chrome 的设备模式下消失

html html5输入范围滑块

如何使 html5 滑块（输入类型='范围'）在 Firefox 中工作

是否可以根据其他表单的输入来更改 HTML5 范围滑块的最小值和最大值？

html5输入类型范围总是指向最小值并且没有在文本输入上获得onChange

没有默认 CSS 的 jQuery 范围滑块