3

我目前正在使用以下代码设置 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;
}

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

我试过 :before 但它没有用。我们怎样才能做到这一点？

4

3 回答 3

10

这是一些 JavaScript，当您更改值时会更新栏的颜色。

input.oninput = function () {
  var value = (input.value - input.min)/(input.max - input.min);
  input.style.backgroundImage = [
    '-webkit-gradient(',
      'linear, ',
      'left top, ',
      'right top, ',
      'color-stop(' + value + ', blue), ',
      'color-stop(' + value + ', red)',
    ')'
  ].join('');
};


onload = function() {
  var inputs = document.querySelectorAll('input[type=range]');
  for (var i = 0; i < inputs.length; i++) {
    input = inputs[i]
    input.oninput = function () {
      var value = (input.value - input.min)/(input.max - input.min);
      input.style.backgroundImage = [
        '-webkit-gradient(',
          'linear, ',
          'left top, ',
          'right top, ',
          'color-stop(' + value + ', blue), ',
          'color-stop(' + value + ', red)',
        ')'
      ].join('');
    };
  }
};
body {
    margin: 20px;
}
input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
    width: 200px;
    height: 8px;
    padding: 0;
    border-left: 20px solid blue;
    border-right: 20px solid red;
    background: #024069;
    border-radius: 2px;
    margin-top: 25px;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.2, blue),
        color-stop(0.2, red)
    );
    outline: none;
}


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;
}
<!doctype html>
<html>
  <body>
    <input type="range" min="1" max="100" step="1" value="20">
  </body>
</html>

感谢@adamvert 建议使用oninput而不是onchange.

于 2012-12-17T12:35:21.007 回答
2

您需要 JS 以您需要的方式执行此操作。我假设即使您滑动物品，您也需要条形着色才能正常工作。即拇指左侧为蓝色，右侧为黑色。

检查这个演示： http: //fiddle.jshell.net/tv3bx/2/

代码：

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;
}
于 2012-12-17T12:20:41.727 回答
1

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

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;
}

要自定义渐变，我推荐Ultimate CSS Gradient Generator。

小提琴

于 2012-12-17T12:03:45.690 回答