范围输入跑步者进度填充颜色答案

【问题标题】：Range input runner progress fill color范围输入跑步者进度填充颜色
【发布时间】：2020-02-27 19:04:35
【问题描述】：

我在这里使用范围输入我试图在我尝试使用背景渐变但无法获得所需的输出之前为滑块拇指添加颜色。如果我删除max="5"，那么它工作正常。下面是我的代码

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
  <input type="range" min="1" max="5" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

【问题讨论】：

你的滑块拇指是绿色的，你到底想在这里实现什么？
@strwoci 现在更新了我的问题检查。我想根据值实现绿色填充
这能回答你的问题吗？ How to style HTML5 range input to have different color before and after slider?
@strwoc 我在增加时尝试了此代码，并且带有边框半径的滑块拇指无法正常工作。根据我的代码，我应该如何实现

标签： javascript html css css-transitions

【解决方案1】：

您可以做的是使用 CSS linear-gradient() 作为范围元素的背景。渐变将如下所示：

linear-gradient(90deg, #4CAF50 ${percentage}%, transparent ${percentage}%)

percentage 是从绿色到透明的突然过渡点。要计算此百分比，需要进行一些数学运算：您需要计算输入元素与其最小值和最大值的相对值。这可以这样计算：

const percentage = (e.target.value - slider.min) / (slider.max - slider.min) * 100;

请参阅下面的概念验证：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

function updateGradient(rangeValue) {
  const percentage = (rangeValue - slider.min) / (slider.max - slider.min) * 100;
  slider.style.backgroundImage = `linear-gradient(90deg, #4CAF50 ${percentage}%, transparent ${percentage}%)`;
}

// Update gradient onload
updateGradient(slider.value);

// Update gradient oninput
slider.addEventListener('input', (e) => {
  output.innerHTML = e.target.value;
  updateGradient(e.target.value);
});

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
  <input type="range" min="1" max="5" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

更好：使用 CSS 自定义属性/变量

更好的是：如果您只使用 CSS 变量/自定义属性，您不必在 JS 中硬编码颜色值。在这种情况下，我们只需将计算出的percentage 作为字符串传递给--percentage 自定义属性：

background-image: linear-gradient(90deg, #4CAF50 var(--percentage), transparent var(--percentage));

那么，在你的 JS 中，就这么简单：

const percentage = (rangeValue - slider.min) / (slider.max - slider.min) * 100;
slider.style.setProperty('--percentage', percentage + '%');

请看下面的例子：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

function updateGradient(rangeValue) {
  const percentage = (rangeValue - slider.min) / (slider.max - slider.min) * 100;
  slider.style.setProperty('--percentage', percentage + '%');
}

// Update gradient onload
updateGradient(slider.value);

// Update gradient oninput
slider.addEventListener('input', (e) => {
  output.innerHTML = e.target.value;
  updateGradient(e.target.value);
});

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background-color: #d3d3d3;
  background-image: linear-gradient(90deg, #4CAF50 var(--percentage), transparent var(--percentage));
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
  <input type="range" min="1" max="5" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

【讨论】：

这是我的代码笔 codepen.io/Merajkhan/pen/JjdWJjB?editors=1010 这里我正在尝试根据我的代码添加你可以检查一下。
@Husna 我不明白你是如何将我的代码改编成你的：你完全错过了价值计算。如果您记录this.value，它将返回原始值，而不是计算的百分比值。您应该使用const percentage = (this.value - slider.min) / (slider.max - slider.min) * 100;，然后在渐变颜色停止位置使用percentage 而不是this.value。
我明白了，感谢您的努力。

【解决方案2】：

将 box-shadow 添加到您的拇指并隐藏滑块类的溢出即可完成工作。

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: white;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  overflow:hidden;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: yellow;
  cursor: pointer;
  box-shadow: -407px 0 0 407px green;
  z-index:2;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
.input{
overflow:hidden;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
  <input type="range" min="1" max="5" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

【讨论】：