今天来探讨一下 HTML5 的 range 这个新的 input 类型，不过重点不是在 range 要如何使用，而是在如何去改变 range 的样式，做出一个漂漂亮亮的滑动杆。

过去我们要制作美美的滑动杆 ( range slider )，不外乎就是用个 span 或 div ，搭配判断滑鼠座标 ( pageX、pageY ) 与点击事件来制作，就算是 HTML5 具有了 range 的 input 类型，预设的样式只能满足基本的需求，对于有一些要求视觉设计的网站来说，根本就毫无用武之地，只好自己手动干一个 range slider 来用了。

虽然这篇会介绍两种修改 range 样式的方法，但由于 HTML5 与 CSS3 在各个浏览器之间仍然没有完全统一 ( 虽然之前好像就说标准制定完成了 )，所以要改变 range 的样式，仍然必须使用到各家浏览器自己的特有写法来调整，因此下列的范例，主要以 Chrome 为主，也会介绍 Firefox 的用法，至于 IE，能吃吗？哈哈哈~~

首先要来写一个 range 出来，min 是最小值，max 是最大值，step 是每隔间距，value 是预设数值：

<input type="range" min="0" max="100" step="1" value="50">

如果没有意外，看到的长相就会是下面这个样子非常的….嗯…你懂的…

第一种方法

纯 CSS 的做法，由于 range 是 input 的一种类型，我们无法用传统的 CSS 编辑方法来修改样式，这裡必须要使用到-webkit-appearance这个特殊属性，这是 webkit 特有的属性，代表使用系统预设的外观，可惜 W3C 到写这篇文章的时候，都还没有纳入规范 ( 不然 webkit 简直是神呀 )，只要我们将这个属性设为none，那麽原本 range 的样式就不会呈现了，这时我们只要加入自己的背景、阴影…等样式，就可以看到样式被换过来了。

input[type="range"]{
  -webkit-appearance: none;
  overflow:hidden;     /* 限定范围 */
  width:200px;
  height:20px;
  outline : none;      /* 避免点选会有蓝线或虚线 */
  background:none;
}

上面的 CSS 只是针对 range 的本体，但还有一个拉把的按钮样式还没改，这时候我们要使用另外一个 webkit 的伪元素::-webkit-slider-thumb来修改。

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  position: relative;    /* 设为相对位置，为了前后区块的绝对位置而设定 */
  width:10px;
  height:10px;
  background:#f22;
  border-radius:50%;
  transition:.2s;        /* 点选放大时候的渐变时间 */
}

写完上面这两段，应该就可以看到range slider变成下面这个样子只有一个红点，然后这个红点可以左右拉动。

接下来要进行的步骤就是加上一些颜色和效果，主要让圆点左边的区域是红色，右边的区域是浅红色，这样看起来才像是不同的 range，为了达到这个目的，我们要使用伪元素裡面的伪元素，也就是在 webkit 的::-webkit-slider-thumb伪元素的前后，各再安插:before和:after的伪元素，并让这两个伪元素颜色不同，就可以做出前后颜色差异的效果。

input[type="range"]::-webkit-slider-thumb:before,
input[type="range"]::-webkit-slider-thumb:after
{
  position: absolute;
  top: 3px;
  width: 2000px;          /* 长度很长没关係，因为刚刚有用 overflow:hidden 了 */
  height: 4px;
  content:"";
  pointer-events: none;   /* 让滑鼠可以点击穿透伪元素，不然会点不到下面 */
  transition:.2s;
}

input[type="range"]::-webkit-slider-thumb:before{
  left: -1997px;
  background: #f22;
}
input[type="range"]::-webkit-slider-thumb:after {
  left: 10px;
  background: #edc;
}

这样写完之后，应该就已经可以看到前后不同颜色的 range slider 效果。

不过光是这样还不够，接着我们要来让点击的时候圆圈会变大，本来想做滑鼠移上去就会变大，但两层伪元素虽然会变大，但位置却无法控制，所以就只好用 active 来代替。

input[type="range"]:active::-webkit-slider-thumb:before,
input[type="range"]:active::-webkit-slider-thumb:after
{
  top: 6px;
}

input[type="range"]:active::-webkit-slider-thumb{
  width:16px;
  height:16px;
}

input[type="range"]:active::-webkit-slider-thumb:after {
  left: 16px;
}

完成之后的长相就会像下图这样。

不过如果是 Firefox，就必须要做一些修改，因为 Firefox 是认不得 webkit 的，要在 Firefox 跑的 CSS 就要写成下面这样，相较于 webkit，Firefox 就显得比较直觉，因为他裡面具有一个::-moz-range-progress的伪元素，利用这个伪元素，我们就不用在前后加个区块，他直接就可以呈现 range 的色彩囉！

input[type="range"]{
  width:200px;
  height:16px;
  outline : none;
  background:none;
}

input[type="range"]::-moz-range-track{
  height:4px;
  background:#edc;
  border:none;
}

input[type="range"]::-moz-range-thumb{
  width:10px;
  height:10px;
  background:#f22;
  border:none;
  border-radius:50%;
}

input[type="range"]::-moz-range-thumb:hover,input[type="range"]:active::-moz-range-thumb{
  width:16px;
  height:16px;
}

input[type="range"]::-moz-range-progress{
  height:4px;
  background:#f22;
}

input[type="range"]::-moz-focus-outer{
  border:none;    /* 去除 focus 时候的外框虚线 */
}

第二种方法

接着介绍一下如何用CSS + jQuery做出一样的效果，同样的，我们要先用-webkit-appearance把原始样式隐藏，先看到input[type="range"]的样式，这边我利用背景颜色渐层的方式，来完成左右颜色不同的效果 ( 虽然方便，但相对的就不能用纯 CSS 控制 )。

input[type="range"]{
  -webkit-appearance: none;
  border-radius:2px;
  width:200px;
  height:3px;
  background-image:-webkit-linear-gradient(left ,#f22 0%,#f22 50%,#fff 50%, #fff 100%);
  box-shadow:inset #ebb 0 0 5px;
  outline : none;
  transition:.1s;
}

接着看到input[type=”range”]::-webkit-slider-thumb的样式，并加上 hover 的效果：

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width:10px;
  height:10px;
  background:#f22;
  border-radius:50%;
  transition:.1s;
}

input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]::-webkit-slider-thumb:active{
  width:16px;
  height:16px;
}

因为背景是用渐层产生的呀，如果要动态改背景，就不是纯 CSS 能办得到的领域，这时候就要借助 jquery 来帮忙了，利用简单的focus和mousemove，我们就可以让背景跟着移动咯！

$(function(){
  var r = $('input');
  r.on('mouseenter',function(){
    var p = r.val();
    r.on('click',function(){
      p = r.val();
      bg(p);
    });
    r.on('mousemove',function(){
      p = r.val();
      bg(p);
    });
  });
  function bg(n){
      r.css({
        'background-image':'-webkit-linear-gradient(left ,#f22 0%,#f22 '+n+'%,#fff '+n+'%, #fff 100%)'
      });
  }
});

以上就是用 CSS 和 jQuery 去修改 range slider 样式的基本方法，分享给大家，活用这个方法，就可以做出许多非常有特色的 range slider 囉。