master

分支 (2)

管理

管理

master

dev_test

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
position: relative;
}
input[type=range] {
-webkit-appearance: none; /* 隐藏滑块，以便自定义滑块样式 */
width: 120px;
border: none;
position: absolute;
top: 20px;
}
input[type=range]:before {
content: attr(min);
padding-right: 5px;
}
input[type=range]:after {
content: attr(max);
padding-left: 5px;
}

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}

input[type=range]:focus {
outline: none; /* 去掉默认蓝色边框 */
}

input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent; /* 隐藏滑块，以便自定义滑块样式 */
border-color: transparent;
color: transparent;
}

/* 设定WebKit浏览器下range */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 10px;
width: 10px;
border-radius: 100%;
background: orange;
cursor: pointer;
margin-top: -2px;
margin-left: -1px;
}

/* Firefox下 */
input[type=range]::-moz-range-thumb {
height: 10px;
width: 10px;
border-radius: 100%;
background: orange;
cursor: pointer;
margin-left: -1px;
}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
cursor: pointer;
background: #ef6683;
}

input[type=range]:focus::-webkit-slider-runnable-track {
background: #ef6683;
}

input[type=range]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
background: #ef6683;
}

input[type=range]::-ms-track {
width: 100%;
height: 6px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
.lightgray {
position: absolute;
top: 27px;
left: 14px;
height: 6px;
display: inline-block;
background-color: lightgray;
}
.value{
margin-left: 30px;
}

		</style>
	</head>
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

	<body>
		<div>
			<input type="range" min="0" max="100" step="0.1" value="0">
			<span id="lightgray" class="lightgray"><strong></strong></span>
			<!-- <span class="value"><span class="min">0.0</span>-5.0</span> -->
		</div>
	</body>
</html>
<script>
	$("input").on("mousemove", function() {
		var $this = $(this);
		//var $min = $this.closest("div").find(".value.min");
		 var value = parseFloat($this.val());
		//$min.text(value.toFixed(1));
		var $lightgray = $("#lightgray");
		var width = 85 / $this.attr('max') * value;
		$lightgray.css('width', width);
	});
</script>