input range美化代码实例
分类：实例代码
分享一段代码实例，它实现了利用jquery和css3美化input range控件的效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
/*去除默认样式*/
input[type=range] {
-webkit-appearance: none;
width: 100%;
border-radius: 2px; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
/*给滑动轨道(track)添加样式*/
input[type=range]::-webkit-slider-runnable-track {
height: 4px;
border-radius: 2px; /*将轨道设为圆角的*/
background: rgba(4,154,12,0.2);
}
input[type=range]::-moz-range-progress {
height: 4px;
border-radius: 2px; /*将轨道设为圆角的*/
background: rgba(4,154,12,0.2);
}
/*原始的控件获取到焦点时，会显示包裹整个控件的边框，所以还需要把边框取消。*/
input[type=range]:focus {
outline: none;
}
/*给滑块(thumb)添加样式*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 14px;
width: 14px;
margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
background: #03a748;
border-radius: 50%; /*外观设置为圆形*/
box-shadow: 0 0 8px #ddd; /*添加底部阴影*/
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$.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, #038653 0%, #038653 '
+ this.value
+ '%,#8dfbd0 '
+ this.value
+ '%, #8dfbd0)');
if ($.isFunction(callback)) {
callback(this);
}
});
};
$(document).ready(function() {
$('input').RangeSlider({
min: 0,
max: 100,
step: 0.1
});
})
</script>
</head>
<body>
<input type="range" value="0" />
</body>
</html>
input range美化代码实例，这样的场景在实际项目中还是用的比较多的，关于input range美化代码实例就介绍到这了。
input range美化代码实例属于前端实例代码，有关更多实例代码大家可以查看。