如何使用 Javascript 将 CSS 添加到 -webkit-slider-runnable-track [英] how to add CSS to -webkit-slider-runnable-track using Javascript
问题描述
我正在尝试更改范围滑块较低的颜色取决于幻灯片.使用以下代码.
I am trying to change the range slider lower color depends upon the slide. Using below code.
<head>
</head>
<input type="range" min="1" max="100" step="1" value="15"id="myrange" class="myrange">
CSS:
input[type="range"] {
width: 100%;
height: 28px;
-webkit-appearance: none;
outline: none;
border: 0; /*for firefox on android*/
padding: 0 8px; /*for IE*/
margin: 8px 0;
}
/*chrome and opera*/
input[type="range"]::-webkit-slider-runnable-track {
height: 8px;
border-radius: 4px;
transition: 0.3s;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, orange),
color-stop(0.15, #C5C5C5)
);
}
.myrange::-webkit-slider-runnable-track {
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, orange),
color-stop(0.15, #C5C5C5)
);
height: 8px; /*trackHeight*/
border-radius: 4px; /*trackHeight*/
transition: 0.3s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background: orange;
width: 28px;
height: 28px;
border-radius: 50%;
margin-top: -12px;
cursor: pointer;
border: 4px solid #fff;
transition: 0.3s;
}
javascript:
javascript:
var style = $("<style>", {type:"text/css"}).appendTo("head");
$(function() {
$('input[type="range"]').on('input change', function() {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
style.text('.myrange::-webkit-slider-runnable-track{background-image:-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', orange), '+ 'color-stop(' + val + ', gray);}');
});
});
我想在使用滑块时更新 input[type="range"]::-webkit-slider-runnable-track 的 CSS.
I would like to update the CSS for input[type="range"]::-webkit-slider-runnable-track while using the slider.
我已经验证了之前的帖子如何调用范围::-webkit-slider-runnable-track? 在同一主题上并相应地编辑了我的代码.如果有人能帮我找出代码问题，真的很感激
I have verified the previous post how to call range::-webkit-slider-runnable-track? on same topic and edited my code accordingly. Really appreciate if someone can help me to identify the issue with code
小提琴:https://jsfiddle.net/fwmscany/1/
推荐答案
现在可以使用了.这是我对 Javascript 所做的更新
This is working now. Here is the update I made to Javascript
$(function() {
var style = $("<style>", {type:"text/css"}).appendTo("head");
$('input[type="range"]').on('input change', function() {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$('<style type="text/css"></style>').text('input[type="range"]::-webkit-slider-runnable-track { background-image:-webkit-gradient(linear, left top, right top, color-stop('+val+', orange), color-stop('+val+', #C5C5C5));}').appendTo('head');
});
});
这篇关于如何使用 Javascript 将 CSS 添加到 -webkit-slider-runnable-track的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
