Html多个input[range]同时使用且共用同一个总数量

一名技术极客

于 2022-01-13 16:55:47 发布

阅读量476

点赞数 2

分类专栏：日常开发问题集锦随笔文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_42081445/article/details/122477757

版权

随笔同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

日常开发问题集锦

13 篇文章 0 订阅

订阅专栏

需求：Html多个input[range]同时使用且共用同一个总数量，并且多个滑动块加一起的数量不得超过总数，等于总数时禁止向右滑动，可以向左滑动

实现效果

在这里插入图片描述

不废话直接上代码

懂的都懂

<html>
	<head>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<style>
			input[type=range] {
				margin-top: 10px;
				margin-bottom: 10px;
				/*margin-top: 8px;*/
				outline: none;
				-webkit-appearance: none;
				/*清除系统默认样式*/
				width: 100% !important;
				background: -webkit-linear-gradient(rgba(0, 85, 255, 1.0), rgba(204, 46, 6, 1.0)) no-repeat, rgba(228, 231, 237, 1);
				background-size: 0% 100%;
				/*设置左右宽度比例*/
				height: 6px;
				/*横条的高度*/
			}

			/*拖动块的样式*/
			input[type=range]::-webkit-slider-thumb {
				-webkit-appearance: none;
				/*清除系统默认样式*/
				height: 16px;
				/*拖动块高度*/
				width: 16px;
				/*拖动块宽度*/
				background: #fff;
				/*拖动块背景*/
				border-radius: 50%;
				/*外观设置为圆形*/
				border: solid 2px #ff0000;
				/*设置边框*/
			}
		</style>
	</head>
	<body>
		<input type="text" id="total" value="50" readonly="readonly" />
		<span><input type="range" setp=1"" min="0" max="50" value="0" οninput="change(this)" /><span
				class="num">0</span>
			<span><input type="range" setp=1"" min="0" max="50" value="0" οninput="change(this)" /><span
					class="num">0</span>
				<span><input type="range" setp=1"" min="0" max="50" value="0" οninput="change(this)" /><span
						class="num">0</span>
					<span><input type="range" setp=1"" min="0" max="50" value="0" οninput="change(this)" /><span
							class="num">0</span>

						<script>
							$(function() {
								changeInit()
							})

							function changeInit() {
								var nodes = $("input[type=range]");
								var current_total = 0;
								var max = 50;
								for (let i = 0; i < nodes.length; i++) {
									var node = nodes[i];
									var value = $(node).val();
									var valStr = (value / max * 100) + "% 100%";
									// $('#value1').html(value);
									$(node).css({
										"background-size": valStr
									})
									$(node).siblings(".num").html(value);
									current_total += Number(value);
								}
								$("#total").val(50 - current_total)
							}

							function getsy(t) {
								var ysy = 0;
								var nodes = $("input[type=range]");
								//获取已经使用的数量抛开当前
								for (let i = 0; i < nodes.length; i++) {
									var node = nodes[i];
									var value = $(node).val();
									ysy += Number(value);
								}
								var value = $(t).val();
								ysy = ysy - value;
								return Number(ysy)
							}

							function change(t) {
								var max = 50;
								// 已使用
								var ysy = getsy(t)
								var sy = max - ysy;
								// console.info(sy)
								var value = $(t).val();
								if (value >= sy) {
									var valStr = (sy / max * 100) + "% 100%";
									$(t).val(sy)
									$(t).css({
										"background-size": valStr
									})
								} else {
									var valStr = (value / max * 100) + "% 100%";
									$(t).css({
										"background-size": valStr
									})
								}
								this.changeInit();
							}
						</script>
	</body>
</html>