数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用HTML添加范围滑块？
使用滑块，用户可以浏览并从条形范围中选择一个值（或范围）。它们非常适合更改亮度和音量等设置，或用于图像滤镜。滑块可以使用图标来描绘条形两端处的数值或相对比例。图标可以用来传达值的范围或其特性，例如其作为音量变化的性质。
让我们深入了解这篇文章，以便更好地理解如何使用HTML添加范围滑块。这可以通过使用<input type="range"> HTML标签来完成。
HTML <input> 标签
用户可以在类型为range的<input>元素中输入一个数字，该数字必须落在给定值和最大值之间。但是，精确值并不被认为很重要。通常使用滑块或拨盘控件来表示这一点，而不是像数字输入类型那样的文本输入框。
语法
以下是<input type="range">的语法。
<input type="range">
让我们看看以下示例，以便更好地理解如何使用HTML添加范围滑块。
示例
在以下示例中，我们将向网页添加简单的范围滑块。
<!DOCTYPE html>
<html>
<body>
<div>
<p>Default Range Slider:</p>
<input type="range" min="1" max="100" value="50">
</div>
</body>
</html>
运行上述代码后，它将生成一个输出，其中包含显示在网页上的范围滑块。
示例
以下是一个示例，我们将运行脚本并显示用户从滑块中选择的数值。
<!DOCTYPE html>
<html>
<head>
<style>
.sliderbox {
width: 90%;
}
.slider {
-webkit-appearance: none;
width: 90%;
height: 25px;
background: #D0ECE7;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 3;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #7D3C98;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #7D3C98;
cursor: pointer;
}
</style>
</head>
<body>
<p>Change The Value Using Slider</p>
<div class="sliderbox">
<input type="range" min="1" max="99" value="32" class="slider" id="tutorial1">
<p>Value: <span id="tutorial"></span></p>
</div>
<script>
var slider = document.getElementById("tutorial1");
var result = document.getElementById("tutorial");
result.innerHTML = slider.value;
slider.oninput = display() {
result.innerHTML = this.value;
}
</script>
</body>
</html>
当上述脚本执行时，输出窗口将弹出，在网页上显示自定义滑块及其默认值。当用户滑动滑块时，事件将被触发并显示滑块位置的值。
示例
考虑以下示例，我们将使用border-radius属性使滑块变圆。
<!DOCTYPE html>
<html>
<head>
<style>
.slidecontainer {
width: 90%;
}
.slider {
-webkit-appearance: none;
width: 90%;
height: 20px;
border-radius: 6px;
background: #DFFF00;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: #145A32;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 26px;
height: 26px;
border-radius: 50%;
background: #145A32;
cursor: pointer;
}
</style>
</head>
<body>
<p>Choose The Value:</p>
<div class="slidecontainer">
<input type="range" min="1" max="99" value="49" class="slider" id="tutorial1">
<p>Value: <span id="tutorial"></span></p>
</div>
<script>
var slider = document.getElementById("tutorial1");
var result = document.getElementById("tutorial");
result.innerHTML = slider.value;
slider.oninput = function() {
result.innerHTML = this.value;
}
</script>
</body>
</html>
运行上述脚本后，输出窗口将弹出，在网页上显示圆形滑块及其默认值。当用户滑动滑块时，事件将被触发并在网页上显示滑块位置的值。
更新于：2023年9月26日
391 次浏览
广告