数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 JavaScript 在 HTML 中创建范围滑块
在网页上，范围滑块用于允许用户指定一个必须介于指定值之间且不超过该值的数字。换句话说，它能够从以滑块显示的范围内选择一个值。
范围滑块通常由滑块或拨盘控件表示，而不是像“数字”输入类型那样的文本输入框。当不需要精确的数值时，它会被使用。但是，向网页添加滑块小部件可能比你想象的要复杂。是的，你可以简单地使用一个类型为 range 的<input>元素。在深入探讨文章之前，让我们快速了解一下<input type=” range”>。
HTML <input type= “range”>
使用<input type="range">标签定义了一个用于输入数字的控件，其中精确值并不关键（类似于滑块控件）。默认情况下，它的范围是 0 到 100。使用下面列出的属性，你可以限制允许的数字类型。
max − 它表示允许的最大值
min − 它表示允许的最小值
step − 它表示合法的数字间隔
value − 它表示默认值
示例
在下面的示例中，我们将使用 border-radius 属性创建一个圆形范围滑块。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
-webkit-appearance: none;
width: 100%;
height: 10px;
background: #ABEBC6;
opacity: 0.8;
}
.tutorial:hover {
opacity: 0.5;
}
.tutorial::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
border-radius: 60%;
background: #DE3163;
cursor: pointer;
}
</style>
</head>
<body style="text-align:center">
<h2 style="font-family:verdana">Round Range Slider</h2>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="10" class="tutorial" id="tp">
<p style="color:#6C3483 ">Current Value : <span id="work"></span></p>
</div>
<script>
var x = document.getElementById("tp");
var a = document.getElementById("work");
a.innerHTML = x.value;
x.oninput = function() {
a.innerHTML = this.value;
}
</script>
</body>
</html>
当我们执行上述代码时，它将生成一个输出，其中包含显示在网页上的圆形范围滑块。当用户滑动滑块时，它将显示滑块当前指向的数字。
示例
考虑下面的示例，我们将创建一个显示在网页上的图像范围滑块。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
-webkit-appearance: none;
width: 100%;
height: 50px;
background: #DE3163;
opacity: 0.5;
transition: opacity .3s;
}
.tutorial:hover {
opacity: 2;
}
.tutorial::-webkit-slider-thumb {
-webkit-appearance: none;
width: 150px;
height: 190px;
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoBZtgd1G271O9xwDDuwfU3uBS5C_CNpBpgg&usqp=CAU');
cursor: pointer;
}
</style>
</head>
<body>
<h2 style="font-family:verdana">Image Range Slider</h2>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="slidecontainer">
<input type="range" min="5" max="100" value="15" class="tutorial" id="tp">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Current Value : <span id="work"></span>
</p>
</div>
<script>
var x = document.getElementById("tp");
var a = document.getElementById("work");
a.innerHTML = x.value;
x.oninput = function() {
a.innerHTML = this.value;
}
</script>
</body>
</html>
运行上述代码后，输出窗口将弹出，在网页上显示图像范围滑块。当用户移动图像时，它指示滑块停止时的值。
更新于: 2024年1月22日
870 次查看
广告