Range is a new slider control in HTML5, and it is also one of the common controls, but the original style of this control is slightly ugly, so I want to make some changes to it. Note that Internet Explorer 9 and earlier versions of IE do not support this control.
The slider range control is similar to the number control in that it can represent integer or decimal values. The min and max properties are also supported for setting the allowed range.
The difference is that the number control is in the form of a text box, while the range control uses the form of a slider. Much like the volume adjuster, the value is selected by dragging the slider. Suitable for use where the input data is not particularly precise.
write picture description here
<input type="range" min="0" max="100" value="70"/>
(Note: The range control browser will not tell you what value is finally set. If you want to display this value, you can use js to respond to the slider's change event (onChange event), and then display the value next to it.)
[I will learn and summarize this later, and then improve this article. There are two demos to write down first.
http://blog.csdn.net/obkoro1/article/details/70197490，https://www.cnblogs.com/Arlar/p/6249733.html】
1. How to use the slider?
Usage is simple as follows:
<input type="range" value="0">
The original styles of each browser are as follows:
Chrome: 
Firefox: 
IE 9+: 
Common (partial) properties are as follows:
Property description
| max | Sets or returns the maximum value of the slider control |
| min | Sets or returns the minimum value of the slider control |
| step | Sets or returns the increment each time the slider control is dragged |
| value | 设置或返回滑块控件的 value 属性值 |
| defaultValue | 设置或返回滑块控件的默认值 |
| autofocus | 设置或返回滑块控件在页面加载后是否应自动获取焦点 |
2、如何美化滑动条？
首先提一个问题有哪些方式能完成对滑动条的美化？目前我所能想到的就是如下的两种方案：
①直接通过css完成样式改造
②将滑动条隐藏(设置opacity: 0)，通过自定义div实现
这次所要介绍的第一种较为简单的实现方式。
3、具体的实现方案是什么？
美化滑动控件，需要完成以下的五个步骤：
①去除系统默认的样式；
②给滑动轨道(track)添加样式；
③给滑块(thumb)添加样式；
④根据滑块所在位置填充进度条；
⑤实现多浏览器兼容。
以上就是实现滑动控件美化的整个流程。我们今天所要达到的效果是这样的：
这里写图片描述如果想要实现填充进度条的效果，
在IE 9以上的浏览器中可以使用::-ms-fill-lower 和 ::-ms-fill-upper来自定义进度条；
在Firefox浏览器中则可以通过::-moz-range-progress来自定义；
而Chrome浏览器中不支持直接设置进度条，而达到填充的效果，所以首先针对Chrome浏览器来实现整个流程。
3.1 去除系统默认的样式（这时控件是不可见的）
这是美化滑动控件的第一步，这步操作是为了不使用原有的样式，使之后的自定义样式有效。代码很简单如下所示，不过要注意的是对基于 webkit 的浏览器，如Chrome, Safari, Opera等，滑块也要移除默认样式。
input[type=range] {
-webkit-appearance: none;
width: 300px;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
拓展：-webkit-appearance: none,去除浏览器默认样式，这个我在后面文章http://570109268.iteye.com/admin/blogs/2405852中已做详解
3.2 给滑动轨道(track)添加样式
正式开始自定义控件样式了。首先是自定义滑动控件的轨道，代码很简单，直接贴出来。
input[type=range]::-webkit-slider-runnable-track {
height: 15px;
border-radius: 10px; /*将轨道设为圆角的*/
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
}
原始的控件获取到焦点时，会显示包裹整个控件的边框，所以还需要把边框取消。
input[type=range]:focus {
outline: none;
}
3.3 给滑块(thumb)添加样式
下面对滑块的样式进行变更，css代码也不是很复杂，如下所示：
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 25px;
width: 25px;
margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
background: #ffffff;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}
3.4 根据滑块所在位置填充进度条
新建一个RangeSlider.js文件，实现对滑动控件属性的设置、事件的监听、以及设置回调函数。监听input事件时，对进度条进行填充，让我们来直接看看代码是怎么实现的。
$.fn.RangeSlider = function(cfg){
this.sliderCfg = {
min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
step: cfg && Number(cfg.step) ? cfg.step : 1,
callback: cfg && cfg.callback ? cfg.callback : null
};
var $input = $(this);
var min = this.sliderCfg.min;
var max = this.sliderCfg.max;
var step = this.sliderCfg.step;
var callback = this.sliderCfg.callback;
$input.attr('min', min)
.attr('max', max)
.attr('step', step);
$input.bind("input", function(e){
$input.attr('value', this.value);
$input.css( 'background', 'linear-gradient(to right, #059CFA, white ' +
this.value + '%, white)' );
if ($.isFunction(callback)) {
callback(this);
}
});
};
Set the min, max, step properties of the sliding control through the cfg object.
Bind the input event to the control. When the slider slides, the event will be triggered. At this time, the filling of the progress bar is completed. Here I use the linear gradient linear-gradient(to right, #059CFA, white ' + this.value + '%, white) In this way, the two colors of light blue and white are gradient from left to right, and the length of the gradient is determined according to the value of the control at this time. When the event is triggered, the callback function is called at the same time, and the function completed by the callback function can be designed by yourself.
Of course, you can also monitor other events according to your own needs, such as the change event, which will be triggered when the value changes, which is very flexible in usage.
How to call the function in this js file to complete the configuration? Very simple, first import the js file in the html file, and then define the script node directly, the html code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript"src="src/RangeSlider.js"></script>
<link rel="stylesheet" href="css/slider.css" type="text/css">
</head>
<body>
<div id="test">
<input type="range" value="0">
</div>
<script>
var change = function($input) {
/*内容可自行定义*/
console.log("123");
}
$('input').RangeSlider({ min: 0, max: 100, step: 0.1, callback: change});
</script>
</body>
</html> 至此基于Chrome浏览器，对滑动控件的美化已全部完成。最后只剩下多浏览器的兼容问题了。
3.5 实现多浏览器兼容
【IE浏览器渲染出现问题，这里记录下，有时间测试解决下】
如果要兼容Firefox浏览器，只需要把上述css代码中的 ::-webkit-slider-runnable-track 替换为 ::-moz-range-track ，就可以完成对轨道的美化了；把css代码中的 ::-webkit-slider-thumb 替换为 ::-moz-range-thumb ，这是对滑块的样式进行改造；而如果是要填充进度条就很简单了，不需要像之前在RangeSlider.js中 $input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)’ ); 这样实现填充，只需要新增如下的css代码即可：
input[type=range]::-moz-range-progress {
background: linear-gradient(to right, #059CFA, white 100%, white);
height: 13px;
border-radius: 10px;
}
如果要想兼容IE 9以上版本的浏览器，对上述css代码要修改的地方稍微多了一些，下面先将针对IE 9+的css代码贴出来：
input[type=range] {
-webkit-appearance: none;
width: 300px;
border-radius: 10px;
}
input[type=range]::-ms-track {
height: 25px;
border-radius: 10px;
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
border-color: transparent; /*去除原有边框*/
color: transparent; /*去除轨道内的竖线*/
}
input[type=range]::-ms-thumb {
border: solid 0.125em rgba(205, 224, 230, 0.5);
height: 25px;
width: 25px;
border-radius: 50%;
background: #ffffff;
margin-top: -5px;
box-shadow: 0 .125em .125em #3b4547;
}
input[type=range]::-ms-fill-lower {
/*进度条已填充的部分*/
height: 22px;
border-radius: 10px;
background: linear-gradient(to right, #059CFA, white 100%, white);
}
input[type=range]::-ms-fill-upper {
/*进度条未填充的部分*/
height: 22px;
border-radius: 10px;
background: #ffffff;
}
input[type=range]:focus::-ms-fill-lower {
background: linear-gradient(to right, #059CFA, white 100%, white);
}
input[type=range]:focus::-ms-fill-upper {
background: #ffffff;
}
以上就是为了兼容IE 9+完整的css代码，也不是很复杂，同样的和Firefox浏览器一样，它支持直接使用css来自定义进度条，所以原先在RangeSlider.js里的 $input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)’ ); 填充方法就不需要啦。
下面提几个IE浏览器需要特别注意的问题：
①在测试时发现，IE浏览器没有加载css文件，导致样式没有发生改变，如果你的使用E浏览器测试时也存在这样的问题，那么你需要将HTML第一行的 <!DOCTYPE html> 改为 <!DOCTYPE>；
②拖动滑块时，IE浏览器没有触发 input 事件，所以只能选择将RangeSlider.js中的监听事件改为 change 事件。
拓展：
【更新轨道(track)颜色填充处理方式】
之前针对Chrome浏览器做的轨道颜色填充处理，效果上不是很好，因为填充的颜色是渐变的，所以靠近滑块那段的颜色会变浅；而且需要末段颜色和轨道最初颜色保持一致，用法不够灵活。现在更改一下代码：
首先，修改css文件中 input[type=range] 这部分内容，新增代码：
background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat; background-size: 0% 100%;因为这里默认滑动条初始从0开始，所以数值为0%。
接下来，修改js文件：
将这行代码
$input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ +
this.value + ‘%, white)’ ); 改为
$input.css( 'background-size', this.value + '% 100%' );稍作修改后，滑动条效果如下（靠近滑块的部分，颜色没有变浅）：
若要兼容FireFox和IE则还是只需要CSS，不需要通过js来做填充处理，兼容这个效果，FireFox只需修改 input[type=range]::-moz-range-progress 这部分；IE 9+需要修改 input[type=range]::-ms-fill-lower 和 input[type=range]:focus::-ms-fill-lower 这两部分，改法很简单，将 backgound 的内容替换为
background: linear-gradient(#059CFA, #059CFA) no-repeat;
.
Bind the input event to the control. When the slider slides, the event will be triggered. At this time, the filling of the progress bar is completed. Here I use the linear gradient linear-gradient(to right, #059CFA, white ' + this.value + '%, white) In this way, the two colors of light blue and white are gradient from left to right, and the length of the gradient is determined according to the value of the control at this time. When the event is triggered, the callback function is called at the same time, and the function completed by the callback function can be designed by yourself. Of course, you can also monitor other events according to your own needs, such as the change event, which will be triggered when the value changes, which is very flexible in usage. How to call the function in this js file to complete the configuration? Very simple, first import the js file in the html file, and then define the script node directly, the html code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript"src="src/RangeSlider.js"></script>
<link rel="stylesheet" href="css/slider.css" type="text/css">
</head>
<body>
<div id="test">
<input type="range" value="0">
</div>
<script>
var change = function($input) {
/*Content can be defined by yourself*/
console.log("123");
}
$('input').RangeSlider({ min: 0, max: 100, step: 0.1, callback: change});
</script>
</body>
</html>
So far, based on the Chrome browser, the beautification of the sliding controls has been completed. In the end, only multi-browser compatibility issues remain.
3.5 Achieve multi-browser compatibility
[There is a problem with IE browser rendering, record it here, and have time to test and solve it]
If you want to be compatible with Firefox browser, you only need to replace ::-webkit-slider-runnable-track in the above CSS code with ::-moz-range-track to complete the beautification of the track; ::-webkit-slider-thumb is replaced by ::-moz-range-thumb, which is a modification of the style of the slider; and if you want to fill the progress bar, it is very simple, you don't need to do it in RangeSlider.js like before $input.css( 'background', 'linear-gradient(to right, #059CFA, white ' + this.value + '%, white)' ); In this way, you only need to add the following css code:
input[type=range]::-moz-range-progress {
background: linear-gradient(to right, #059CFA, white 100%, white);
height: 13px;
border-radius: 10px;
}
如果要想兼容IE 9以上版本的浏览器，对上述css代码要修改的地方稍微多了一些，下面先将针对IE 9+的css代码贴出来：
input[type=range] {
-webkit-appearance: none;
width: 300px;
border-radius: 10px;
}
input[type=range]::-ms-track {
height: 25px;
border-radius: 10px;
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
border-color: transparent; /*去除原有边框*/
color: transparent; /*去除轨道内的竖线*/
}
input[type=range]::-ms-thumb {
border: solid 0.125em rgba(205, 224, 230, 0.5);
height: 25px;
width: 25px;
border-radius: 50%;
background: #ffffff;
margin-top: -5px;
box-shadow: 0 .125em .125em #3b4547;
}
input[type=range]::-ms-fill-lower {
/*进度条已填充的部分*/
height: 22px;
border-radius: 10px;
background: linear-gradient(to right, #059CFA, white 100%, white);
}
input[type=range]::-ms-fill-upper {
/*进度条未填充的部分*/
height: 22px;
border-radius: 10px;
background: #ffffff;
}
input[type=range]:focus::-ms-fill-lower {
background: linear-gradient(to right, #059CFA, white 100%, white);
}
input[type=range]:focus::-ms-fill-upper {
background: #ffffff;
}
以上就是为了兼容IE 9+完整的css代码，也不是很复杂，同样的和Firefox浏览器一样，它支持直接使用css来自定义进度条，所以原先在RangeSlider.js里的 $input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)’ ); 填充方法就不需要啦。
下面提几个IE浏览器需要特别注意的问题：
①在测试时发现，IE浏览器没有加载css文件，导致样式没有发生改变，如果你的使用E浏览器测试时也存在这样的问题，那么你需要将HTML第一行的 <!DOCTYPE html> 改为 <!DOCTYPE>；
②拖动滑块时，IE浏览器没有触发 input 事件，所以只能选择将RangeSlider.js中的监听事件改为 change 事件。
拓展：
【更新轨道(track)颜色填充处理方式】
之前针对Chrome浏览器做的轨道颜色填充处理，效果上不是很好，因为填充的颜色是渐变的，所以靠近滑块那段的颜色会变浅；而且需要末段颜色和轨道最初颜色保持一致，用法不够灵活。现在更改一下代码：
首先，修改css文件中 input[type=range] 这部分内容，新增代码：
background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat; background-size: 0% 100%;因为这里默认滑动条初始从0开始，所以数值为0%。
接下来，修改js文件：
将这行代码
$input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ +
this.value + ‘%, white)’ ); 改为
$input.css( 'background-size', this.value + '% 100%' );稍作修改后，滑动条效果如下（靠近滑块的部分，颜色没有变浅）：
若要兼容FireFox和IE则还是只需要CSS，不需要通过js来做填充处理，兼容这个效果，FireFox只需修改 input[type=range]::-moz-range-progress 这部分；IE 9+需要修改 input[type=range]::-ms-fill-lower 和 input[type=range]:focus::-ms-fill-lower 这两部分，改法很简单，将 backgound 的内容替换为
background: linear-gradient(#059CFA, #059CFA) no-repeat;
input[type=range]::-moz-range-progress {
background: linear-gradient(to right, #059CFA, white 100%, white);
height: 13px;
border-radius: 10px;
}
If you want to be compatible with browsers of IE 9 and above, there are a few more places to modify the above CSS code. The CSS code for IE 9+ will be pasted first:
input[type=range] {
-webkit-appearance: none;
width: 300px;
border-radius: 10px;
}
input[type=range]::-ms-track {
height: 25px;
border-radius: 10px;
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
border-color: transparent; /*Remove the original border*/
color: transparent; /*Remove vertical lines in the track*/
}
input[type=range]::-ms-thumb {
border: solid 0.125em rgba(205, 224, 230, 0.5);
height: 25px;
width: 25px;
border-radius: 50%;
background: #ffffff;
margin-top: -5px;
box-shadow: 0 .125em .125em #3b4547;
}
input[type=range]::-ms-fill-lower {
/*进度条已填充的部分*/
height: 22px;
border-radius: 10px;
background: linear-gradient(to right, #059CFA, white 100%, white);
}
input[type=range]::-ms-fill-upper {
/*进度条未填充的部分*/
height: 22px;
border-radius: 10px;
background: #ffffff;
}
input[type=range]:focus::-ms-fill-lower {
background: linear-gradient(to right, #059CFA, white 100%, white);
}
input[type=range]:focus::-ms-fill-upper {
background: #ffffff;
}
The above is to be compatible with the complete css code of IE 9+, and it is not very complicated. Also, like the Firefox browser, it supports the direct use of css to customize the progress bar, so the original $input.css( 'background in RangeSlider.js) ', 'linear-gradient(to right, #059CFA, white ' + this.value + '%, white)' ); Filling method is not needed. Here are a few issues that IE browsers need to pay special attention to: ① During the test, it was found that the IE browser did not load the css file, resulting in no changes to the style. If you also have such problems when using the E browser to test, then you You need to change the <!DOCTYPE html> in the first line of HTML to <!DOCTYPE>; ②When dragging the slider, the IE browser does not trigger the input event, so you can only choose to change the listening event in RangeSlider.js to the change event . Extension: [Update the color fill processing method of the track] The color fill processing of the track for the Chrome browser before, the effect is not very good, because the color of the fill is gradient, so the color near the slider will become lighter ; and the color of the end segment is required to be consistent with the initial color of the track, and the usage is not flexible enough. Now change the code: First, modify the input[type=range] part of the css file and add the following code:
background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat; background-size: 0% 100%;Because the default slider here starts from 0 initially, the value is 0%. Next, modify the js file: add this line of code
$input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ +
this.value + ‘%, white)’ );
change to
$input.css( 'background-size', this.value + '% 100%' );After a little modification, the slider effect is as follows (the part close to the slider, the color is not lighter):
If you want to be compatible with FireFox and IE, you still only need CSS, you don't need to do padding through js. To be compatible with this effect, FireFox only needs to modify the input[type=range]::-moz-range-progress part; IE 9+ needs Modify the two parts of input[type=range]::-ms-fill-lower and input[type=range]:focus::-ms-fill-lower. The modification method is very simple. Replace the content of the background with
background: linear-gradient(#059CFA, #059CFA) no-repeat;
background: linear-gradient(#059CFA, #059CFA) no-repeat;