mui input range(滑块) 解决在ios上不能点击改变input value，增加进度条的颜色自定义

最新推荐文章于 2025-09-09 20:59:14 发布

原创最新推荐文章于 2025-09-09 20:59:14 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#mui input range(滑块)

mui 同时被 3 个专栏收录

10 篇文章

订阅专栏

JavaScript

6 篇文章

订阅专栏

mui input range(滑块)

0 篇文章

订阅专栏

本文介绍如何使用HTML5的Range输入控件，并通过CSS和JavaScript进行样式定制，实现动态背景色渐变和拖动块样式修改，增强用户体验。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
   <style type="text/css">
   	/*横条样式*/
   	input[type=range] {
   	  -webkit-appearance: none;/*清除系统默认样式*/
   	  width: 60%;
	  margin-left: 20%;
	  margin-top: 30px;
   	  background: -webkit-linear-gradient(#26a6d3, #26a6d3) no-repeat, #d3d3d3;/*设置左边颜色为#26a6d3，右边颜色为#d3d3d3*/
   	  background-size: 0% 100%;
   	  height: 5px;
   	}
	
   	/*拖动块的样式*/
   	input[type=range]::-webkit-slider-thumb {
   	  -webkit-appearance: none;/*清除系统默认样式*/
   	  height: 13px;
   	  width: 13px;
   	  background: #fff;
   	  border-radius: 50%;
   	  border: solid 1px #ddd; 
   	}
	
	#input_range1 {
		background-size: 50% 100%;/*设置默认值为50的时候，左边的颜色*/
	}
	
   </style>
</head>
<body>
	<input id="input_range1" type="range" value="50" min="0" max="100" />
	<input id="input_range2" type="range" value="0" min="0" max="100" />
	<input id="input_range3" type="range" value="0" min="0" max="100" />
	
	<script type="text/javascript" charset="utf-8">
	  	mui.init();
		
		var input_range2 = document.getElementById("input_range2");
		input_range2.value = "20";
		input_range2.style.webkitBackgroundSize = input_range2.value+"% 100%";
		
		var rangeList = document.querySelectorAll('input[type="range"]');
		for (var i = 0; i < rangeList.length; i++) {
			var range = rangeList[i];
			range.addEventListener('input',function(e){
				this.style.webkitBackgroundSize = this.value+"% 100%";
			});
			range.addEventListener('touchstart',function(e){//解决在ios上不能点击改变input value
				var min = 100/this.clientWidth;
				var x = this.getBoundingClientRect().left;
				this.value = min*(e.touches[0].pageX-x);
				this.style.webkitBackgroundSize = this.value+"% 100%";
			}); 
		}
		
	</script>
</body>
</html>