input range滑动条样式自定义

input[type="range"]的样式在谷歌，火狐，IE下的样式各不相同，而实际往往需要固定的样式，这里做了三个浏览器下样式处理，IE只支持9+。

      

上面是效果图。

首先清除浏览器默认的range样式。

      

 input[type=range]{
            width: 556px;
            height: 17px;
            outline: none;
            -webkit-appearance: none;/*清除系统默认样式*/
            background-color: #eaf5f9;
        }

接着修改滑块样式，下面是三个浏览器下的针对处理。

  input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;/*清除系统默认样式*/
            height:17px;/*拖动块高度*/
            width: 10px;/*拖动块宽度*/
            background: url("slide_block_03.png") no-repeat;
        }
        input[type=range]::-moz-range-thumb {
            -moz-appearance: none;/*清除系统默认样式*/
            border:0;
            height:17px;/*拖动块高度*/
            width: 10px;/*拖动块宽度*/
            background: url("slide_block_03.png") no-repeat;
        }
        input[type=range]::-ms-thumb {
            border:0;
            height:17px;/*拖动块高度*/
            width: 10px;/*拖动块宽度*/
            background: url("#{$bgUrl}slide_block_03.png") no-repeat;
        }

对于IE浏览器还需要添加以下配置：

 input[type=range]::-ms-track {
            height: 17px;
            box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
            border-color: transparent; /*去除原有边框*/
            color: transparent; /*去除轨道内的竖线*/
        }
        input[type=range]::-ms-fill-lower {
            /*进度条已填充的部分*/
            height: 17px;
            background-color:#eaf5f9;
        }
        input[type=range]::-ms-fill-upper {
            /*进度条未填充的部分*/
            height: 17px;
            background-color:#eaf5f9;
        }
        input[type=range]:focus::-ms-fill-lower {
            background-color:#eaf5f9;
        }
        input[type=range]:focus::-ms-fill-upper {
            background-color:#eaf5f9;
        }

这样range的样式就换成我们想要的样式了。实现最终效果，需要自己添加些样式。

css样式

/* 滑动条 begin */
        input[type=range]{
            width: 556px;
            height: 17px;
            outline: none;
            background: rgba(255,255,255,0);
            -webkit-appearance: none;/*清除系统默认样式*/
            position: absolute;
            left:0;
            top:0;
            z-index:2;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;/*清除系统默认样式*/
            height:17px;/*拖动块高度*/
            width: 10px;/*拖动块宽度*/
            background: url("slide_block_03.png") no-repeat;
        }
        input[type=range]::-moz-range-thumb {
            -moz-appearance: none;/*清除系统默认样式*/
            border:0;
            height:17px;/*拖动块高度*/
            width: 10px;/*拖动块宽度*/
            background: url("slide_block_03.png") no-repeat;
        }
        input[type=range]::-ms-track {
            height: 17px;
            box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
            border-color: transparent; /*去除原有边框*/
            color: transparent; /*去除轨道内的竖线*/
        }
        input[type=range]::-ms-thumb {
            border:0;
            height:17px;/*拖动块高度*/
            width: 10px;/*拖动块宽度*/
            background: url("#{$bgUrl}slide_block_03.png") no-repeat;
        }
        input[type=range]::-ms-fill-lower {
            /*进度条已填充的部分*/
            height: 17px;
            background-color:#eaf5f9;
        }
        input[type=range]::-ms-fill-upper {
            /*进度条未填充的部分*/
            height: 17px;
            background-color:#eaf5f9;
        }
        input[type=range]:focus::-ms-fill-lower {
            background-color:#eaf5f9;
        }
        input[type=range]:focus::-ms-fill-upper {
            background-color:#eaf5f9;
        }
        .input_range_box {
            width: 556px;
            position: relative;
        }
        .range_bg{
            width: 556px;
            height: 17px;
            background-color: #eaf5f9;
            position: absolute;
            left:0;
            top:0;
        }
        .range_line{
            width: 556px;
            position: absolute;
            left:0;
            top:8px;
            z-index: 1;
            border:1px solid #5192c1;
        }
        /* 滑动条 end*/

dom对象

<div class="input_range_box">
    <input type="range" value="0" name="test" min="0" max="100">
    <div class="range_line"></div>
    <div class="range_bg"></div>
</div>

以及滑块图标。

处理比较粗糙(截图为谷歌浏览器下效果)，希望能给您一定帮助。