html range样式修改,自定义(滑动条)input[type="range"]样式

这是我的第一篇博文，也是我这个小白努力的起点。刚接触JavaScript没多久，如果文中有错误的地方欢迎大家指正，或者给予建议，让我能逐渐向大牛靠拢。今天这篇文章给大家带来的是关于美化Slider Bar的相关内容。Range是HTML5中新出现的滑块控件，也是常见的控件的之一，不过这个控件的原始样式略丑，所以想对它进行一些改造。需要注意的是Internet Explorer 9及更早IE版本并不支持这个控件。

1、如何使用滑动条？

用法很简单，如下所示：

各浏览器原始样式如下：

Chrome:

image.png

Firefox:

image.png

IE 9+:

image.png

常用(部分)属性如下：

属性

描述

max

设置或返回滑块控件的最大值

min

设置或返回滑块控件的最小值

step

设置或返回每次拖动滑块控件时的递增量

value

设置或返回滑块控件的 value 属性值

defaultValue

设置或返回滑块控件的默认值

autofocus

设置或返回滑块控件在页面加载后是否应自动获取焦点

2、如何美化滑动条？

首先提一个问题有哪些方式能完成对滑动条的美化？目前我所能想到的就是如下的两种方案：

直接通过css完成样式改造

将滑动条隐藏(设置opacity: 0)，通过自定义div实现

这次所要介绍的第一种较为简单的实现方式。

3、具体的实现方案是什么？

美化滑动控件，需要完成以下的五个步骤：

去除系统默认的样式；

给滑动轨道(track)添加样式；

给滑块(thumb)添加样式；

根据滑块所在位置填充进度条；

实现多浏览器兼容。

以上就是实现滑动控件美化的整个流程。我们今天所要达到的效果是这样的：

image.png

如果想要实现填充进度条的效果，在IE 9以上的浏览器中可以使用::-ms-fill-lower 和 ::-ms-fill-upper来自定义进度条；在Firefox浏览器中则可以通过::-moz-range-progress来自定义；而Chrome浏览器中不支持直接设置进度条，而达到填充的效果，所以首先针对Chrome浏览器来实现整个流程。

3.1 去除系统默认的样式

这是美化滑动控件的第一步，这步操作是为了不使用原有的样式，使之后的自定义样式有效。代码很简单如下所示，不过要注意的是对基于 webkit 的浏览器，如Ch