master

分支 (2)

管理

管理

master

dev_test

web-test
/
input-range美化5.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
input[type="range"] {
  -webkit-appearance: none; /*去除默认样式*/
  background-color: #ebeff4;
  /*border-radius: 15px;*/
  width: 80% !important;
  -webkit-appearance: none;
  height:4px;
  padding: 0;
  border: none;
  outline: 0;
  /*input的长度为80%，margin-left的长度为10%*/
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;/*去除默认样式*/
  cursor: default;
  top: 0;
  height: 10px;
  width: 10px;
  transform: translateY(0px);
  /*background: none repeat scroll 0 0 #5891f5;*/
  background: #fff;
  border-radius: 15px;
  border: 2px solid #006eb3;
  /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/
}
.box{
	width: 300px;
	height: 40px;
	line-height: 40px;
	position: relative;
}
		</style>
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

	</head>
	<body>

		<div class="box"><input id="snrPollInterval" type="range" min="1" max="30"></div>
	</body>
</html>
<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, #059CFA, #ebeff4 ' + this.value + '%, #ebeff4)');

			if ($.isFunction(callback)) {
				callback(this);
			}
		});
	};
	$('#snrPollInterval').RangeSlider({
		min: 0,
		max: 100,
		step: 1,
		callback: ''
	}); //#snrPollInterval为input的id名
</script>