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

百变鹏仔 4周前 (09-20) #CSS

文章标签自定义

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

<input type = “range” min = “0” max = “100”/>

正如您在上面的代码片段中看到的，类型等于范围，我们提供min =“0”和max =“100”值，这将是字段的范围。

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

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

立即学习“Java免费学习笔记（深入）”；

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

使用 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 代码 -

样式.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 的 HTML 文件，而不是为 HTML、CCS 和 JavaScript 创建三个单独的文件扩展名，并在 body 标签上方的标签中写入 CSS 代码，在 body 标签末尾或 head 标签内的 <script></script> 标签中写入 JavaScript 代码。

下面是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 is: " + 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代码

样式.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。

      Custom range Sliders         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;   }      Custom Range Sliders with HTML, CSS and JavaScript
   <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 = &quot;Range value is: &quot; + range_value.value;      }   </script>         Custom Range Slider: 
      
      Calulate Range

在上面的程序中，我们使用了 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() 事件

示例

Custom Range Sliders with HTML, CSS and JavaScript

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

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写