时间戳

首页 > 解决方案 > 有没有办法在 CSS 中为范围输入的左侧着色？

html - 有没有办法在 CSS 中为范围输入的左侧着色？

问题描述

我正在使用此代码更改滑块的样式，但到目前为止我找不到更改左侧的方法：

.slider {
  -webkit-appearance: none; 
  appearance: none;
  width: 100%; 
  height: 2px; 
  background: #ffffff; 
  outline: none; 
  opacity: 0.7; 
  -webkit-transition: 0.2s; 
  transition: opacity 0.2s;
}
<div class="slidecontainer">
  <input
    type="range"
    min="1"
    max="100"
    value="50"
    class="slider"
    id="myRange"
  />
</div>

标签： htmlcss

解决方案

您可以使用背景：线性渐变（...）；带有onchange JS 事件

document.querySelector('.slidecontainer > input').onchange = function(e){
  this.style.background = 'linear-gradient(to right, red, red ' + this.value + '%, yellow ' + this.value + '%)';
};
.slider {
  -webkit-appearance: none; 
  appearance: none;
  width: 100%; 
  height: 2px; 
  background:
      linear-gradient(
          to right, 
          red,
          red 50%,
          yellow 50%
      ); 
  outline: none; 
  opacity: 0.7; 
  -webkit-transition: 0.2s; 
  transition: opacity 0.2s;
}
<div class="slidecontainer">
  <input
    type="range"
    min="1"
    max="100"
    value="50"
    class="slider"
    id="myRange"
  />
</div>

推荐阅读