如何使用 CSS 和 JavaScript 建立自定義範圍滑塊？

範圍滑塊是 HTML 中的一種輸入欄位，其型別為“range”。它用於在給定特定範圍內選擇數值，我們可以在輸入欄位內傳遞範圍，如下面的程式碼片段所示

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

如您在上面的程式碼片段中看到的，type 等於 range，並且我們提供了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 檔案，並在<style></style>標籤（位於 body 標籤上方）中編寫 CSS 程式碼，在<script></script>標籤（位於 body 標籤結束前或 head 標籤內）中編寫 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，我們建立頁面的內容。我們首先建立一個輸入欄位，該欄位接受 range 作為型別，並在輸入欄位內，我們傳遞 min 值等於 1，max 值等於 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 程式碼

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 中，我們建立了一個輸入欄位，該欄位接受 range 作為型別，然後我們建立了一個 HTML 按鈕（計算範圍），然後我們建立了一個 span 標籤來顯示範圍值。

在 CSS 檔案中，我們管理頁面的樣式。在 JavaScript 中，我們透過其 id 獲取 HTML 按鈕，然後我們使用 onclick 事件，如下所示：

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

然後在函式內部，我們獲取輸入範圍，並在使用者單擊按鈕時使用 innerHTML 屬性顯示值。

更新於：2022-11-02

800 次瀏覽

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.