Voi*_*zer -1 html javascript css
我正在制作一个包含范围输入滑块的网站。我希望滑块根据滑块的值更改颜色。
例如，如果该值为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)
这是我到目前为止的代码：
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);
}Please bear in mind that I know very little Javascript, however I know many other programming languages and I know enough to understand most Javascript code. So please try to make it as simple as is possible.
How would I be able to do this effectively?
You're basically looking for this, right?
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));
}
}<!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>It's a bit trickier as ::webkit-slider-thumb is a pseudo element and (i might be wrong here) i don't think you can target it directly with JavaScript. So what I did was add a <style> tag to <head> and dynamically change its contents based on current input value, in a function triggered on input event.
It's more of a proof of concept, it can be improved by using addEventListener and it probably looks prettier in jQuery. I'll leave all that jazz to you.
编辑：正如exaneta的答案所指出的，在处理动态变化的颜色时，您有多种选择。虽然我在an中使用了简单255 > 0的红色和0 > 255绿色rgb()，但是您可能要使用exaneta的解决方案：hsl(${e.target.value}, 100%, 50%)。
我将这样做：我将创建一个新<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>最简单的方法是使用变量 css。见：https : //developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
const Slider = document.querySelector('input[name=rangeInput]')
Slider.oninput =_=> Slider.style.setProperty('--SliderColor', `hsl(${Slider.value}, 100%, 50%)`).slidecontainer {
transform: translateY(-10px);
text-align: center;
}
.slider {
--SliderColor: hsl(50, 100%, 50%);
-webkit-appearance: none;
width: 60%;
margin: 50px auto;
height: 8px;
border-radius: 4px;
margin-bottom: 15px;
background-color: rgb(200, 200, 200);
}
/* --------------------------- webkit browsers */
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 10px;
background-color: var(--SliderColor);
overflow: visible;
cursor: pointer;
}
/* -------------------------- Firefox */
.slider::-moz-range-thumb {
-moz-appearance: none;
width: 18px;
height: 18px;
border-radius: 10px;
background-color: var(--SliderColor);
overflow: visible;
cursor: pointer;
}
.slider::-moz-focus-outer { border: 0; }
/* Remove dotted outline from range input element focused in Firefox */<div class="slidecontainer">
<input type="range" min="0" max="100" value="50" class="slider" name="rangeInput">
</div>[编辑]：添加 css .slider::-moz-range-thumb(Firefox)
| 归档时间： |
|
| 查看次数： |
305 次 |
| 最近记录： |