範圍滑桿是 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 id="Custom-Range-Sliders-with-HTML-CSS-and-JavaScript">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 id="Custom-Range-Sliders-with-HTML-CSS-and-JavaScript">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 id="Custom-Range-Sliders-with-HTML-CSS-and-JavaScript">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 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 = "Range value is: " + range_value.value; } </script>
在上面的程式中，我們使用了HTML、CSS 和JavaScript，在HTML 中我們建立一個接受類型作為範圍的輸入字段，然後建立一個HTML 按鈕（計算範圍），然後我們建立一個span標籤來顯示範圍值。
在 CSS 檔案中，我們管理頁面的樣式。在 JavaScript 中，我們透過 id 取得 HTML 按鈕，然後使用 onclick 事件，如下所示 -
let btn = document.getElementById('btn');
btn.onclick = function(){}
然後在函數內部，當使用者點擊按鈕時，我們取得輸入範圍並使用innerHTML 屬性顯示值。
以上是如何使用 CSS 和 JavaScript 建立自訂範圍滑桿？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
什麼是CSS Flexbox？Apr 30, 2025 pm 03:20 PM文章討論了CSS FlexBox，這是一種佈局方法，用於有效地對齊和分佈響應設計中的空間。它說明了FlexBox用法，將其與CSS網格進行了比較，並詳細瀏覽了瀏覽器支持。
我們如何使用CSS使網站迅速響應？Apr 30, 2025 pm 03:19 PM本文討論了使用CSS創建響應網站的技術，包括視口元標籤，靈活的網格，流體媒體，媒體查詢和相對單元。它還涵蓋了使用CSS網格和Flexbox一起使用，並推薦CSS框架
CSS盒裝屬性有什麼作用？Apr 30, 2025 pm 03:18 PM本文討論了CSS盒裝屬性，該屬性控制了元素維度的計算方式。它解釋了諸如Content-Box，Border-Box和Padding-Box之類的值，以及它們對佈局設計和形式對齊的影響。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
禪工作室 13.0.1
強大的PHP整合開發環境
