資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用HTML新增範圍滑塊？
使用滑塊，使用者可以瀏覽並從條形範圍中選擇一個值（或範圍）。它們非常適合更改亮度和音量等設定，或用於影像濾鏡。滑塊可以使用圖示來描繪條形兩端處的數值或相對比例。圖示可以用來傳達值的範圍或其特性，例如其作為音量變化的性質。
讓我們深入瞭解這篇文章，以便更好地理解如何使用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>
執行上述指令碼後，輸出視窗將彈出，在網頁上顯示圓形滑塊及其預設值。當用戶滑動滑塊時，事件將被觸發並在網頁上顯示滑塊位置的值。
更新於：2023年9月26日
391 次瀏覽
廣告