input range美化程式碼例項

antzone發表於2017-04-18

分享一段程式碼例項，它實現了利用jquery和css3美化input range控制元件的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章