Javascript 之前的HTML5输入范围样式

我目前正在使用以下代码设计HTML5输入类型范围：

input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
    width: 100%;
    height: 8px;
    padding: 0 20px;
    background: #024069;
    border-radius: 2px;
    margin-top: 25px;
}


input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; 
    -moz-apperance:none; 
    width:25px; 
    height:25px;
    -webkit-border-radius:20px; 
    -moz-border-radius:20px; 
    -ms-border-radius:20px; 
    -o-border-radius:20px; 
    border-radius:20px;
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #d7d7d7), color-stop(0.51, #d1d1d1), color-stop(1, #c8c8c8) );
    border: 1px solid #787878;
}

这一切都很好。但是现在我尝试在实际的滑块上有两种不同的颜色，所以左手拇指是蓝色的，右手拇指是黑色的

---

我以前试过，但没用。我们如何做到这一点？

最简单的方法是使用渐变：

CSS

input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
    width: 100%;
    height: 8px;
    padding: 0 20px;
    background: #0000ff;
    background: -moz-linear-gradient(left,  #0000ff 0%, #0000ff 50%, #000000 50%, #000000 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0000ff), color-stop(50%,#0000ff), color-stop(50%,#000000), color-stop(100%,#000000));
    background: -webkit-linear-gradient(left,  #0000ff 0%,#0000ff 50%,#000000 50%,#000000 100%);
    background: -o-linear-gradient(left,  #0000ff 0%,#0000ff 50%,#000000 50%,#000000 100%);
    background: -ms-linear-gradient(left,  #0000ff 0%,#0000ff 50%,#000000 50%,#000000 100%);
    background: linear-gradient(to right,  #0000ff 0%,#0000ff 50%,#000000 50%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#000000',GradientType=1 );
    border-radius: 2px;
    margin-top: 25px;
}


input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; 
    -moz-apperance:none; 
    width:25px; 
    height:25px;
    -webkit-border-radius:20px; 
    -moz-border-radius:20px; 
    -ms-border-radius:20px; 
    -o-border-radius:20px; 
    border-radius:20px;
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #d7d7d7), color-stop(0.51, #d1d1d1), color-stop(1, #c8c8c8) );
    border: 1px solid #787878;
}

来定制我推荐的渐变

---

您需要JS以您需要的方式来完成这项工作。我想，即使在滑动物体时，也需要正确使用条形图的颜色。i、 e.左手是蓝色，右手是黑色

查看此演示：

代码：

功能颜色条（滑块）{
变量left=$（'.left'），right=$（'.right'）；
log（slider.val（））；
如果（left.length==0）{
left=$（''）.addClass（'left'）.appendTo（'body'）；
right=$（''）.addClass（'right'）.appendTo（'body'）；
}
left.css({
左：（slider.offset（）.left+20）+“px”，
顶部：滑块.offset（）.top+'px'，
宽度：（slider.width（）*（parseInt（slider.val（））/100））+px，
高度：slider.height（）+'px'
});
right.css({
左：（slider.offset（）.left+20+slider.width（）*（parseInt（slider.val（））/100））+'px'，
顶部：滑块.offset（）.top+'px'，
宽度：（slider.width（）*（1-parseInt（slider.val（））/100））+'px'，
高度：slider.height（）+'px'
});
}
$（'input'）.change（函数（）{
色条（$（此））；
});
颜色栏（$（‘输入’）；
​
/*CSS*/
.左，.右{
位置：绝对位置；
z指数：1；
}
.左{
背景颜色：蓝色；
}
.对{
背景色：黑色；
}

这里有一些JavaScript，当您更改值时，它会更新条的颜色

input.oninput=函数（）{
var值=（input.value-input.min）/（input.max-input.min）；
input.style.backgroundImage=[
'-webkit梯度（',，
“线性，”，
“左上，”，
“右上，”，
'颜色停止（'+value+'，蓝色），'，
'颜色停止（'+value+'，红色）'，
')'
].加入（“”）；
};

onload=function（）{
var inputs=document.querySelectorAll（'input[type=range]'）；
对于（变量i=0；i
正文{
利润率：20px；
}
输入[type=“range”]{
-webkit外观：无；
-moz外观：无；
宽度：200px；
高度：8px；
填充：0；
左边框：20px纯蓝色；
右边框：20px纯红；
背景#024069；
边界半径：2px；
边缘顶部：25px；
背景图像：-webkit渐变(
线性的
左上角，
右上角，
颜色停止（0.2，蓝色），
颜色停止（0.2，红色）
);
大纲：无；
}
输入[type=“range”]：-webkit滑块拇指{
-webkit外观：无；
-moz外观：无；
宽度：25px；
高度：25px；
-webkit边界半径：20px；
-moz边界半径：20px；
-ms边界半径：20px；
-o-边界半径：20px；
边界半径：20px；
背景图像：-webkit渐变（线性、左上、左下、颜色停止（0，#fefefe）、颜色停止（0.49，#d7d7d7）、颜色停止（0.51，#d1d1d1）、颜色停止（1，#c8c8））；
边框：1px实心#787878；
}

恐怕不能完全用CSS来完成。那么这可以用javascript来完成吗？@techfoobar是对的，实际的滑块是单个元素。您可以通过在
chrome://flags
在Chrome中。您可以使用JS为其上色，但每次更改后都必须更新样式。@techfoobar这不正确，请参阅我的。@yckart-您的解决方案确实为该条上色。但是当我向左或向右滑动时会发生什么呢？我相信OP想要给滑动条上色（拇指左侧为蓝色，右侧为黑色），不是滑块拇指本身。我是否应该使用javascript动态更改拇指上的颜色，因为我希望拇指的左侧始终为蓝色，右侧始终为黑色？此解决方案确实会为工具栏着色。但是当我向左或向右滑动时会发生什么呢？很好，但是你需要使用oninput而不是onchange，这样当你拖动拇指时背景就会更新
function colorTheBar(slider) {
    var left = $('.left'), right = $('.right');
    console.log(slider.val());
    if(left.length == 0) {
        left = $('<div>').addClass('left').appendTo('body');
        right = $('<div>').addClass('right').appendTo('body');
    }
    left.css({
        left: (slider.offset().left + 20) + 'px',
        top: slider.offset().top + 'px',
        width: (slider.width() * (parseInt(slider.val())/100)) + 'px',
        height: slider.height() + 'px'
    });
    right.css({
        left: (slider.offset().left + 20 + slider.width() * (parseInt(slider.val())/100)) + 'px',
        top: slider.offset().top + 'px',
        width: (slider.width() * (1 - parseInt(slider.val())/100)) + 'px',
        height: slider.height() + 'px'
    });
}

$('input').change(function() {
    colorTheBar($(this));
});

colorTheBar($('input'));
​


/* CSS */

.left, .right {
    position: absolute;    
    z-index: 1;
}
.left {
    background-color: blue;
}
.right {
    background-color: black;
}