我正在制作一个包含范围输入滑块的站点。我希望滑块根据其值更改颜色。
例如,如果值为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代码。因此,请尝试使其尽可能简单。
我将如何有效地做到这一点?
答案 0 :(得分:5)
您基本上是在找这个,对吧?
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
。
答案 1 :(得分:3)
这就是我要这样做的方式:我将创建一个新的<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>
答案 2 :(得分:2)
最简单的方法是使用变量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>
答案 3 :(得分:1)
您的帖子与此类似:.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>