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美化代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容