Question

我正在制作一个包含范围输入滑块的站点。我希望滑块根据其值更改颜色。

例如，如果值为0，则拇指颜色将为rgb(255, 0, 0);，如果为100，则颜色将为rgb(0, 255, 0);，拇指将改变颜色。

要明确一点，我不要这样的东西：

if slider_value <= 29:
  thumb_color = rgb(255, 0, 0)
else if slider_value >= 30 && slider_value <= 69:
  thumb_color = rgb(255, 255, 0)
else 
  thumb_color = rgb(0, 255, 0)

这是我到目前为止的代码：

.slider {
  width: 60%;
  margin: 50px auto;
  -webkit-appearance: none;
  height: 8px;
  border-radius: 4px;
  margin-bottom: 15px;
  background-color: rgb(200, 200, 200);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 10px;
  background-color: rgb(255, 120, 0);
  overflow: visible;
  cursor: pointer;
}

.slidecontainer {
  transform: translateY(-10px);
}

<div class="slidecontainer" align="center">
  <input type="range" min="0" max="100" value="50" class="slider" name="rangeInput">
</div>

请记住，我几乎不懂Javascript，但是我知道许多其他编程语言，并且我了解足以理解大多数Javascript代码。因此，请尝试使其尽可能简单。

我将如何有效地做到这一点？

Answer 1

您基本上是在找这个，对吧？

Workout

'Workout'

这有点棘手，因为const input = document.querySelector('input[type="range"]'); const style = document.createElement('style'); const head = document.head || document.getElementsByTagName('head')[0]; style.type = 'text/css'; head.appendChild(style); input.oninput = function(e) { const cssText = `input.slider::-webkit-slider-thumb { background-color: rgb(${255 - 2.55*e.target.value}, ${2.55*e.target.value}, 0); }`; if (style.styleSheet){ style.styleSheet.cssText = cssText; } else { style.innerHTML=""; style.appendChild(document.createTextNode(cssText)); } }是一个伪元素，（我在这里可能错了）我认为您不能直接使用JavaScript来定位它。因此，我要做的就是在<!DOCTYPE html> <html> <style> .slider { width: 60%; margin: 50px auto; -webkit-appearance: none; height: 8px; border-radius: 4px; margin-bottom: 15px; background-color: rgb(200, 200, 200); } .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 10px; background-color: rgb(128, 128, 0); overflow: visible; cursor: pointer; } .slidecontainer { transform: translateY(-10px); } </style> <body> <div class="slidecontainer" align="center"> <input type="range" min="0" max="100" value="50" class="slider" name="rangeInput" oninput="test"> </div> </body> </html>事件中触发的函数中，向::webkit-slider-thumb添加一个<style>标记，并根据当前输入值动态更改其内容。

它更多是一种概念证明，可以通过使用<head>进行改进，并且在jQuery中看起来更漂亮。我把所有的爵士乐都留给你。

编辑：正如exaneta的答案所指出的那样，在处理动态变化的颜色时，您有多种选择。虽然我在input中将简单的addEventListener用于红色，将255 > 0用于绿色，但您可能要使用exaneta的解决方案：0 > 255。

Answer 2

这就是我要这样做的方式：我将创建一个新的<style>元素，并将该元素附加到头部。接下来，在输入时，我将编写一个css规则，使用hsl颜色将拇指的颜色从红色更改为绿色。我将使这个CSS规则成为新样式元素的文本内容。希望对您有所帮助。

let s = document.createElement("style");
document.head.appendChild(s);
itr.addEventListener("input", () => {
  s.textContent = `.slider::-webkit-slider-thumb{background-color: hsl(${itr.value}, 100%, 50%)}`
})

.slider {
  width: 60%;
  margin: 50px auto;
  -webkit-appearance: none;
  height: 8px;
  border-radius: 4px;
  margin-bottom: 15px;
  background-color: rgb(200, 200, 200);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 10px;
  background-color: hsl(50, 100%, 50%);
  overflow: visible;
  cursor: pointer;
}

.slidecontainer {
  transform: translateY(-10px);
}

<div class="slidecontainer" align="center">
  <input id="itr" type="range" min="0" max="100" value="50" class="slider" name="rangeInput">
</div>

Answer 3

最简单的方法是使用变量css。参见：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

const Slider = document.querySelector('input[type="range"]')

Slider.oninput = function(e)
  {
  Slider.style.setProperty('--SliderColor', `hsl(${e.target.value}, 100%, 50%)`)
  }

.slider {
  --SliderColor      : hsl(50, 100%, 50%);
  width              : 60%;
  margin             : 50px auto;
  -webkit-appearance : none;
  height             : 8px;
  border-radius      : 4px;
  margin-bottom      : 15px;
  background-color   : rgb(200, 200, 200);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance : none;
  width              : 18px;
  height             : 18px;
  border-radius      : 10px;
  background-color   : var(--SliderColor);
  overflow           : visible;
  cursor             : pointer;
}
.slidecontainer {
  transform    : translateY(-10px);
  text-align   : center;
}

<div class="slidecontainer">
  <input type="range" min="0" max="100" value="50" class="slider" name="rangeInput">
</div>

Answer 4

您的帖子与此类似：.slider::-webkit-slider-thumb needed in javascript

const range = document.getElementById("rangeInput");
var style = document.querySelector('[data="test"]');

range.addEventListener("input", () => {
   const slider_value = range.value;
   let thumb_color;
   if (slider_value <= 29) {
       thumb_color = "rgb(255, 0, 0)";
   }
   else if (slider_value >= 30 && slider_value <= 69) {
       thumb_color = "rgb(255, 255, 0)";
   }
   else {
       thumb_color = "rgb(0, 255, 0)";
   }
   style.innerHTML = `.slider::-webkit-slider-thumb { background-color: ${thumb_color} !important; } .slider:-moz-range-thumb {  ${thumb_color} !important; }`;
});

.slider {
    width: 60%;
    margin: 50px auto;
    -webkit-appearance: none;
    height: 8px;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: rgb(200, 200, 200);
}

.slider::-webkit-slider-thumb {
   -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 10px;
    background-color: rgb(255, 120, 0);
    overflow: visible;
    cursor: pointer;
    transition: all 1s ease;
        
}

.slidecontainer {
    transform: translateY(-10px);
}

<style data="test" type="text/css"></style>

<div class="slidecontainer" align="center">
    <input id="rangeInput" type="range" min="0" max="100" value="50" class="slider" name="rangeInput">
</div>

CSS和Javascript-根据值更改滑块的拇指颜色

4 个答案: