在引入 HTML5 之前，我们甚至无法考虑在网页上创建范围滑块。
HTML5 引入了新的属性和功能，包括范围输入类型。
范围输入元素允许我们为站点用户创建滑动控件。
在本教程中，我们将展示如何使用一些 jQuery 代码来捕获和响应用户与范围滑块控件的交互。
这是一个 jQuery 解决方案，用于显示所有范围输入元素的值：
$(function () {
$('.slider').on('input change', function () {
$(this).next($('.slider_label')).html(this.value);
});
$('.slider_label').each(function () {
let value = $(this).prev().attr('value');
$(this).html(value);
});
})
让我们看看运行中的代码：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossoroirn="anonymous"></script>
</head>
<body>
<h2>Range Slider</h2>
<p>
<label for="range_weight">Weight: </label>
<input type="range" name="weight" class="slider" min="0" max="100" value="60">
<span class="slider_label"></span>
</p>
<p>
<label for="range_weight">Height: </label>
<input type="range" name="height" class="slider" min="0" max="100" value="8">
<span class="slider_label"></span>
</p>
<p>
<label for="range_weight">Length: </label>
<input type="range" name="length" class="slider" min="0" max="100" value="30">
<span class="slider_label"></span>
</p>
<script>
$(function() {
$('.slider').on('input change', function() {
$(this).next($('.slider_label')).html(this.value);
});
$('.slider_label').each(function() {
let value = $(this).prev().attr('value');
$(this).html(value);
});
})
</script>
</body>
</html>
另一个带有负值和十进制值的范围滑块示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossoroirn="anonymous"></script>
</head>
<body>
<h2>Range Slider</h2>
<p>
<label for="range_weight">Negative: </label>
<input type="range" name="negative" class="slider" min="-25" max="25" value="-10">
<span class="slider_label"></span>
</p>
<p>
<label for="range_weight">Decimal: </label>
<input type="range" name="decimal" class="slider" min="0.001" max="2" value="0.08" step="0.001">
<span class="slider_label"></span>
</p>
<script>
$(function() {
$('.slider').on('input change', function() {
$(this).next($('.slider_label')).html(this.value);
});
$('.slider_label').each(function() {
let value = $(this).prev().attr('value');
$(this).html(value);
});
})
</script>
</body>
</html>
价格范围滑块的另一个示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js'></script>
<style>
.sliderId {
width: 500px;
margin: auto;
text-align: center;
position: relative;
height: 100px;
}
.sliderId svg,
.sliderId input[type=range] {
position: absolute;
left: 0;
bottom: 0;
}
input[type=number] {
border: 1px solid #ddd;
text-align: center;
font-size: 24px;
-moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type=number]:invalid,
input[type=number]:out-of-range {
border: 2px solid #e60023;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #1da1f2;
}
input[type=range]:focus::-ms-fill-lower {
background: #1da1f2;
}
input[type=range]:focus::-ms-fill-upper {
background: #1da1f2;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: #1da1f2;
border-radius: 1px;
box-shadow: none;
border: 0;
}
input[type=range]::-webkit-slider-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #1da1f2;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: #1da1f2;
border-radius: 1px;
box-shadow: none;
border: 0;
}
input[type=range]::-moz-range-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #1da1f2;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
background: #1da1f2;
border-radius: 1px;
box-shadow: none;
border: 0;
}
input[type=range]::-ms-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #1da1f2;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="sliderId">
<span>from
<input type="number" value="1000" min="0" max="100000"/> to
<input type="number" value="10000" min="0" max="100000"/>
</span>
<input value="10000" min="0" max="100000" step="500" type="range" />
<input value="50000" min="0" max="100000" step="500" type="range" />
<svg width="100%" height="25">
<line x1="4" x2="520" stroke="#212121" stroke-width="20" stroke-dasharray="1 25"></line>
</svg>
</div>
<script>
(function() {
let parent = document.querySelector(".sliderId");
if(!parent) return;
let rangeSlide = parent.querySelectorAll("input[type=range]");
let numberSlide = parent.querySelectorAll("input[type=number]");
rangeSlide.forEach(function(el) {
el.oninput = function() {
let slide1 = parseFloat(rangeSlide[0].value);
let slide2 = parseFloat(rangeSlide[1].value);
if(slide1 > slide2) {
[slide1, slide2] = [slide2, slide1];
}
numberSlide[0].value = slide1;
numberSlide[1].value = slide2;
}
});
numberSlide.forEach(function(el) {
el.oninput = function() {
let number1 = parseFloat(numberSlide[0].value);
let number2 = parseFloat(numberSlide[1].value);
if(number1 > number2) {
let tmp = number1;
numberSlide[0].value = number2;
numberSlide[1].value = tmp;
}
rangeSlide[0].value = number1;
rangeSlide[1].value = number2;
}
});
})();
</script>
</body>
</html>
<input> 类型的范围元素让用户指定一个不小于指定值，不大于另一个指定值的数值。
默认情况下，范围是从 0 到 100。
但是我们可以使用 max、min、step 和 value 属性来限制数字。
日期：2020-06-02 22:16:15 来源：oir作者：oir