Question

正如你在IE中看到的那样，滑块正在工作，但是我找不到chrome / firefox中的“ms-fill-lower”伪代码。另外我还没弄明白如何在拇指上方连续打印出数字（我正在考虑在JS中创建一个新的childnode，然后使用滑块的位置+拇指的当前值以及我可以使用此信息为全新的儿童节点创造新的位置。是否有更简单的方法？）

<!DOCTYPE:html>
<html>

<head>
  <style>
    input {
      position: fixed;
      top: 40;
      right: 40;
    }
    
    input[type=range] {
      -webkit-appearance: none;
      margin: 30px 0px;
      width: 80%;
    }
    
    input[type=range]:focus {
      outline: none;
    }
    
    input[type=range]::-ms-thumb {
      box-shadow: 0px 0px 0px #ffccff, 0px 0px 0px #ffccff;
     
      height: 30px;
      width: 48px;
      background-image: url('https://scontent-vie1-1.xx.fbcdn.net/hphotos-xpa1/v/t34.0-12/12204684_1096899726988871_1886399559_n.jpg?oh=b8481694391b1a5ebe58733f0638a08f&oe=563669C2');
      cursor: pointer;
      -webkit-appearance: none;
      margin-top: 0px;
    }
    
    input[type=range]::-ms-track {
      width: 100%;
      height: 30px;
      cursor: pointer;
      animate: 0.2s;
      background: transparent;
      border-color: transparent;
     color: transparent;
    }
    
    input[type=range]::-ms-fill-lower {
      background: #ff0000;
      border: 0.2px solid #ff0000;
       }
    
    input[type=range]::-ms-fill-upper {
      background: #ffccff;
     
       }
    
    input[type=range]:focus::-ms-fill-lower {
      background: #ff0000;
    }
    
    input[type=range]:focus::-ms-fill-upper {
      background: #ffccff;
    }
  </style>
</head>

<body>
  <input type="range"></input>
</body>

</html>

Answer 1

chrome ::-webkit-slider-thumb和::-webkit-slider-runnable-track的伪元素 for firefox ::-moz-range-thumb和::-moz-range-track 连续打印号码

<input type="range" max="22" min="12" value="18" step="2" oninput="dataUpdate()" id="myInput" />
<p id="mydata"></p>

<script>
 function dataUpdate(){
   var x = document.getElementById("myInput").value;
   document.getElementById("mydata").innerHTML=x;
 }
</script>

其中value是加载范围的当前位置，step是每个值之间的差异，oninput事件将在您移动范围时触发。拇指和输出将显示在<p>标记

中

要检查chrome中的伪元素，您可以阅读此http://webcomponents.org/articles/introduction-to-shadow-dom/

如何使用CSS在chrome中使用不同的颜色填充输入[type =“range”]的左侧？

1 个答案: