如何使用 CSS 和 JavaScript 创建自定义范围滑块?\

cssweb developmentfront end technologyjavascript

范围滑块是 HTML 中的输入字段，接受"范围"类型。它用于选择给定特定范围内的数值，我们可以在输入字段内传递范围，如下面的代码片段所示

<input type = "range" min = "0" max = "100"/>

如您在上面的代码片段中所见，类型等于范围，我们提供 min = "0" 和 max = "100" 值，它们将是字段的范围。

自定义范围滑块 可根据需要帮助自定义字段范围。

在下面的文章中，让我们了解如何使用 CSS 和 JavaScript 创建自定义范围滑块。

让我们为每种语言创建单独的文件 −

使用 oninput() 事件

oninput 事件是一种 HTML 事件，用于在用户在输入字段中输入值时执行即时操作。以下是使用此事件的代码片段 -

<input type = '' oninput = 'event name()'>

以下是以下代码的解释 -

HTML 文件(index.html)

这是必须使用 .html 扩展名保存的 HTML 文件。在此文件中，我们将创建一个输入范围字段，这将是我们的自定义范围滑块，在输入字段内我们将设置范围。并创建一个 span 标签以显示自定义范围滑块值。

以下是 HTML 的代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Custom range Sliders</title>
</head>
<body>
   <h1>Custom Range Sliders with HTML, CSS and JavaScript</h1>
   <div class="sliders">
      <p>Custom Range Slider: </p>
      <input type="range" min = "1" max = "100" oninput="Range()" id = 'slider' title = 'range'><br>
      <span id = 'res'></span>
   </div>
</body>
</html>

CSS 文件 (style.css)

这是使用 .css 扩展名创建的 CSS 文件。使用 CSS 我们将管理 HTML 页面的样式。

以下是将 CSS 文件与 HTML 文件连接起来的代码片段 −

<link rel="stylesheet" href="index.css">

以下是 CSS 的代码 −

style.css

span{
   position: relative;
   top: 20px;
   left: 20px;
   font-size: 30px;
   font-weight: 700;
}

p{
   position: relative;
   left: 10px;
   font-size: 20px;
}

input[type='range']
{
   -webkit-appearance: none;
   width: 400px;
   height: 30px;
   background-color: black;
   border-radius: 60px;
}

#slider::-webkit-slider-thumb{
   -webkit-appearance: none;
   width: 50px;
   height: 50px;
   border-radius: 40px;
   appearance: none;
   cursor: pointer;
   background-color: blue;
}

JavaScript 文件 (index.js)

这是必须以 .js 扩展名保存的 JavaScript 文件。在 JavaScript 中，我们将编写一个程序来获取输入范围值并使用 innerHTML 属性将其显示给用户。

以下是将 JavaScript 文件与 HTML 文件连接起来的代码片段 -

<script src = 'index.html'>

注意 - 您无需为 HTML、CCS 和 JavaScript 创建三个单独的文件，只需创建一个扩展名为 .html 的 HTML 文件，并在 body 标签上方的 <style></style> 标签中编写 CSS 代码，将 JavaScript 代码写入 <script></script> 内标签位于 body 标签结束之前或 head 标签内。

以下是 JavaScript 程序

index.js

 function Range() {
   //fetch the input range value through its id
   let range_value = document.getElementById('slider');
   //fetch the span tag through its id
   let result = document.getElementById('res');
   //show the value using innerHTML property
   res.innerHTML = "Range value is: " + range_value.value;
}

示例

执行上述 HTML、CSS 和 JavaScript。


<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Custom range Sliders</title>
   <style>
      span{
         position: relative;
         top: 20px;
         left: 20px;
         font-size: 30px;
         font-weight: 700;
      }

      p{
         position: relative;
         left: 10px;
         font-size: 20px;
      }

      input[type='range']
      {
         -webkit-appearance: none;
         width: 400px;
         height: 30px;
         background-color: black;
         border-radius: 60px;
      }

      #slider::-webkit-slider-thumb{
         -webkit-appearance: none;
         width: 50px;
         height: 50px;
         border-radius: 40px;
         appearance: none;
         cursor: pointer;
         background-color: blue;
      }
   </style>
</head>
<body>
   <h1>Custom Range Sliders with HTML, CSS and JavaScript</h1>
   <script>
      function Range()
      {
         //fetch the input range value through its id
         let range_value = document.getElementById('slider');
         //fetch the span tag through its id
         let result = document.getElementById('res');
         //show the value using innerHTML property
         res.innerHTML = "Range value is: " + range_value.value;
      }
   </script>
   <div class="sliders">
      <p>Custom Range Slider: </p>
      <input type="range" min = "1" max = "100" oninput="Range()" id = 'slider' title = 'range'><br>
      <span id = 'res'></span>
   </div>
</body>
</html>

如您在上面的程序中看到的，我们使用 HTML、CSS 和 JavaScript 创建了自定义范围滑块。

使用 HTML，我们创建页面的内容。我们首先创建一个接受范围作为类型的输入字段，并在输入字段内传递等于 1 的最小值和等于 100 的最大值，如下所示 -

<input type = 'range' min = '1' max = '100' oninput = 'eventname()'>

稍后，我们创建一个 oninput 事件，如您在上面的代码片段中看到的那样，oninput 事件用于在用户在输入字段中输入值时计算值。然后我们通过其 id 获取输入范围值，如下所示 -

let range_value = document.getElementById('slider');

我们获取 span 标签，并通过 innerHTML 属性显示范围滑块值，如下所示 -

res.innerHTML = "范围值为:" + range_value.value;

使用 onclick() 事件

onclick() 事件是一个 HTML 事件，用于在用户单击特定按钮时执行操作。以下是使用 onclick 事件的代码片段

<button onclick = 'event_name()'>

以下是创建自定义范围滑块的程序

以下是 HTML 代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Custom range Sliders</title>
</head>
<body>
   <h2>Custom Range Sliders with HTML, CSS and JavaScript</h2>
   <div class="sliders">
      <p>Custom Range Slider: </p>
      <input type="range" min = "1" max = "100" id = 'slider' title = 'range'><br>
      <button id = 'btn'>Calulate Range</button>
      <span id = 'res'></span>
   </div>
</body>
</html>

以下是 CSS 代码

Style.css

span{ position: relative;
      top: 35px;
      left: 40px;
      font-size: 30px;
      font-weight: 700;
}

p{
   position: relative;
   left: 10px;
   font-size: 20px;
}

input[type='range']
{
   -webkit-appearance: none;
   width: 400px;
   height: 30px;
   background-color: yellow;
   border-radius: 60px;
}

#slider::-webkit-slider-thumb{
   -webkit-appearance: none;
   width: 50px;
   height: 50px;
   border-radius: 40px;
   appearance: none;
   cursor: pointer;
   background-color: red;
}

button{
   width: 150px;
   height: 40px;
   background-color: blue;
   color: white;
   border: none;
   cursor: pointer;
   position: relative;
   left: 20px;
   top: 30px;
   transition: 0.5s;
   border-radius: 5px;
}

button:hover{
   opacity: 0.7;
}

以下是 JavaScript 程序

index.js

let btn = document.getElementById('btn');
btn.onclick = function() {
   //fetch the input range value through its id
   let range_value = document.getElementById('slider');
   //fetch the span tag through its id
   let result = document.getElementById('res');
         
   //show the value using innerHTML property
   res.innerHTML = "Range value is: " + range_value.value;
}

示例

执行上述 HTML、CSS 和 JavaScript。


<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Custom range Sliders</title>
   <style>
      span{ position: relative;
      top: 35px;
      left: 40px;
      font-size: 30px;
      font-weight: 700;
   }

   p{
      position: relative;
      left: 10px;
      font-size: 20px;
   }

   input[type='range']
   {
      -webkit-appearance: none;
      width: 400px;
      height: 30px;
      background-color: yellow;
      border-radius: 60px;
   }

   #slider::-webkit-slider-thumb{
      -webkit-appearance: none;
      width: 50px;
      height: 50px;
      border-radius: 40px;
      appearance: none;
      cursor: pointer;
      background-color: red;
   }

   button{
      width: 150px;
      height: 40px;
      background-color: blue;
      color: white;
      border: none;
      cursor: pointer;
      position: relative;
      left: 20px;
      top: 30px;
      transition: 0.5s;
      border-radius: 5px;
   }

   button:hover{
      opacity: 0.7;
   }
   </style>
</head>
<body>
   <h2>Custom Range Sliders with HTML, CSS and JavaScript</h2>
   <script>
      let btn = document.getElementById('btn');
      btn.onclick = function() {
         //fetch the input range value through its id
         let range_value = document.getElementById('slider');

         //fetch the span tag through its id
         let result = document.getElementById('res');
            
         //show the value using innerHTML property
         res.innerHTML = "Range value is: " + range_value.value;
      }
   </script>
   <div class="sliders">
      <p>Custom Range Slider: </p>
      <input type="range" min = "1" max = "100" id = 'slider' title = 'range'><br>
      <button id = 'btn'>Calulate Range</button>
      <span id = 'res'></span>
   </div>
</body>
</html>

在上面的程序中，我们使用了 HTML、CSS 和 JavaScript，在 HTML 中，我们创建了一个接受范围类型的输入字段，然后我们创建了一个 HTML 按钮(计算范围)，然后我们创建了一个 span 标签来显示范围值。

在 CSS 文件中，我们管理页面的样式。在 JavaScript 中，我们通过其 id 获取 HTML 按钮，然后我们使用 onclick 事件，如下所示 -

let btn = document.getElementById('btn');
btn.onclick = function(){}

然后在函数内部，我们获取输入范围并在用户点击按钮时使用 innerHTML 属性显示值。

打印下一节 ❯

技术文章和资源

热门类别

如何使用 CSS 和 JavaScript 创建自定义范围滑块?\

使用 oninput() 事件

HTML 文件(index.html)

CSS 文件 (style.css)

JavaScript 文件 (index.js)

示例

如您在上面的程序中看到的，我们使用 HTML、CSS 和 JavaScript 创建了自定义范围滑块。

使用 onclick() 事件

示例

在上面的程序中，我们使用了 HTML、CSS 和 JavaScript，在 HTML 中，我们创建了一个接受范围类型的输入字段，然后我们创建了一个 HTML 按钮(计算范围)，然后我们创建了一个 span 标签来显示范围值。

相关文章

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！