input新类型type="range"的使用,针对样式的改写

最新推荐文章于 2024-07-29 14:52:42 发布

古语静水流深

最新推荐文章于 2024-07-29 14:52:42 发布

阅读量1.2w

点赞数 4

文章标签： input range

本文链接：https://blog.csdn.net/zhanghuiqi205/article/details/74989743

版权

最近公司的一些项目需要，对input的新类型range进行了一番的使用，主要是针对它的样式进行了重新的改写。达到下面的这种需求，我移动range上面的小球，它会随着我的移动而改变它的值，如图：

开始的位置移动过程中

可能网上也有很多这样的例子，但是我还是把我的分享一下，代码简单的很，只需要选择节点就可以了。代码如下：

css部分：

input[type=range]{ 
		 margin-top: 8px;
	         outline: none; 
		 -webkit-appearance: none;/*清除系统默认样式*/  
		 width:56% !important;  
		 background: -webkit-linear-gradient(#61bd12, #61bd12) no-repeat, #ddd;  
	         background-size: 30% 100%;/*设置左右宽度比例*/  
		height: 3px;/*横条的高度*/  
} 
 /*拖动块的样式*/  
   input[type=range]::-webkit-slider-thumb {  
	 -webkit-appearance: none;/*清除系统默认样式*/  
	height:16px;/*拖动块高度*/  
        width: 16px;/*拖动块宽度*/  
        background: #fff;/*拖动块背景*/  
	border-radius: 50%; /*外观设置为圆形*/  
	 border: solid 1px #ddd; /*设置边框*/  
}

HTML部分：

<div class="an_speed after_clear">
   <span>速度:</span>
   <input type="range" name="range_speed" id="range_speed" value="30" οninput="changeSpeed()" />
   <span id="value1">3.0</span>秒
</div>

JavaScript部分：这里我引入了jQuery，大家可以自己去网上找一份引入。

<script type="text/javascript">
	
	function changeSpeed() {
		var value = $('#range_speed').val();
		var valStr = value + "% 100%";
		$('#value1').html((value / 10).toFixed(1));
		$('#range_speed').css({
		  "background-size": valStr
		})
		$("input[name='animat_speed']").val((value / 10).toFixed(1));
	};
</script>

这样就可以达到我上面的效果，供大家参考.....