LESS制作跨浏览器html5 range控件，js控制valu

html5里自带的range，在各个浏览器表现效果都不一样

所以我们需要将其统一，原理很简单

主要是利用appearance取消原来的样式，再自行修改

@thumb-color: white;
@thumb-radius: 8px;   /*用px也挺省心的，上面是滑块*/
@thumb-height: 1.5rem; 
@thumb-width: 3rem; 

@thumb-shadow-size: 1px; 
@thumb-shadow-blur: 1px; 
@thumb-shadow-color: #f4a007;

@thumb-border-width: 1px; 
@thumb-border-color: #f4a007;  /*橘黄色*/

@track-color: #f4a007;  /* //滑动轨道*/
@track-width: 80%; 
@track-height: .5rem; 

@track-shadow-size: 2px; 
@track-shadow-blur: 2px; 
@track-shadow-color: #f4a007;

@track-border-width: 1px; 
@track-border-color: #f4a007;
@track-radius: 5px;

@contrast: 5%; 

.shadow(@shadow-size,@shadow-blur,@shadow-color) {
box-shadow: @shadow-size @shadow-size @shadow-blur @shadow-color, 0px 0px @shadow-size lighten(@shadow-color,5%);
}
.track() {
  width: @track-width;
  height: @track-height;
  cursor: pointer;
  animate: 0.2s;
} 
.thumb() {
  .shadow(@thumb-shadow-size,@thumb-shadow-blur,@thumb-shadow-color);
  border: @thumb-border-width solid @thumb-border-color;
  height: @thumb-height;
  width: @thumb-width;
  border-radius: @thumb-radius;
  background-image: url(../vertical-line.png);    /*这里可以选择性删掉*/
  background-repeat: no-repeat;
  background-size: 50% 50%;
  background-position: center center;
  background-color: @thumb-color;
  cursor: pointer;
}
input[type=range] {
  -webkit-appearance: none;
  /*margin: @thumb-height/2 0;*/
  width: @track-width;
  &:focus {
     outline: none;
  } 
  &::-webkit-slider-runnable-track {
    .track();
    .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
    background: @track-color;
    border-radius: @track-radius;
    border: @track-border-width solid @track-border-color;
  } 
  &::-webkit-slider-thumb {
   .thumb();
   -webkit-appearance: none;
   margin-top: -.5rem;  /*//这里是自己加的*/
  } 
  &:focus::-webkit-slider-runnable-track {
    background: lighten(@track-color, @contrast);
  } 
  
  &::-moz-range-track {
    .track();
    .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
    background: @track-color;
    border-radius: @track-radius;
    border: @track-border-width solid @track-border-color;
  }
  &::-moz-range-thumb {
    .thumb();
  }  

  &::-ms-track {
    .track();
    background: transparent;
    border-color: transparent;
    border-width: @thumb-width 0;
    color: transparent;
  } 
  &::-ms-fill-lower {
    background: darken(@track-color, @contrast);
    border: @track-border-width solid @track-border-color;
    border-radius: @track-radius*2;
    .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
  } 
  &::-ms-fill-upper {
    background: @track-color;
    border: @track-border-width solid @track-border-color;
    border-radius: @track-radius*2;
    .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);
  } 
  &::-ms-thumb {
    .thumb();
  } 
  &:focus::-ms-fill-lower {
    background: @track-color;
  } 
  &:focus::-ms-fill-upper {
    background: lighten(@track-color, @contrast);
  }
}

以上教程来自w3cplus: http://www.w3cplus.com/html5/styling-cross-browser-compatible-range-inputs-css.html © w3cplus.com

下面要对它做一下JS上的改变

比如跟着我们的value进行变色

一句话搞定，用数组的join方法巧妙结合到一起。

        range.addEventListener("input",function() {
           var value = (range.value - range.min)/(range.max - range.min);
           range.style.backgroundImage = [
            '-webkit-gradient(',
            'linear, ',
            'left top, ',
            'right top, ',
            'color-stop(' + value + ', #f4a007), ',
            'color-stop(' + value + ', lightgray)',
           ')'
            ].join('');
            console.log(range.style.backgroundImage);
        },false);

其中left top 是第一个color的起点
right top 是第二个color的起点，一定要自己尝试过，才能理解这个方向问题
参数虽然多一点，但是控制起来会更准确，比如写一个斜着的渐变

 background-image: -webkit-gradient(
    linear, 
    0% 0%, 
    100% 100%, 
    color-stop(40%, rgb(244, 160, 7)), 
    color-stop(60%, lightgray)
    );