如何使用 HTML 添加范围滑块?

htmlweb developmentfront end technology更新于 2025/4/20 9:16:17

使用滑块，用户可以浏览并选择一个条形范围内的值(或范围)。它们非常适合更改亮度和音量等设置，或使用图像滤镜。滑块可以使用图标来表示条形两端的数字或相对刻度。图标可以用来表达值的范围或其特征，例如其作为音量变化的性质。

让我们深入研究本文，以便更好地了解如何使用 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>

运行上述脚本后，输出窗口将弹出，并在网页上显示圆形滑块及其默认值。当用户滑动滑块时，事件会被触发，并在网页上显示滑块的位置值。