資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 JavaScript 在 HTML 中建立範圍滑塊
在網頁上，範圍滑塊用於允許使用者指定一個必須介於指定值之間且不超過該值的數字。換句話說，它能夠從以滑塊顯示的範圍內選擇一個值。
範圍滑塊通常由滑塊或撥盤控制元件表示，而不是像“數字”輸入型別那樣的文字輸入框。當不需要精確的數值時，它會被使用。但是，向網頁新增滑塊小部件可能比你想象的要複雜。是的，你可以簡單地使用一個型別為 range 的<input>元素。在深入探討文章之前，讓我們快速瞭解一下<input type=” range”>。
HTML <input type= “range”>
使用<input type="range">標籤定義了一個用於輸入數字的控制元件，其中精確值並不關鍵（類似於滑塊控制元件）。預設情況下，它的範圍是 0 到 100。使用下面列出的屬性，你可以限制允許的數字型別。
max − 它表示允許的最大值
min − 它表示允許的最小值
step − 它表示合法的數字間隔
value − 它表示預設值
示例
在下面的示例中，我們將使用 border-radius 屬性建立一個圓形範圍滑塊。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
-webkit-appearance: none;
width: 100%;
height: 10px;
background: #ABEBC6;
opacity: 0.8;
}
.tutorial:hover {
opacity: 0.5;
}
.tutorial::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
border-radius: 60%;
background: #DE3163;
cursor: pointer;
}
</style>
</head>
<body style="text-align:center">
<h2 style="font-family:verdana">Round Range Slider</h2>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="10" class="tutorial" id="tp">
<p style="color:#6C3483 ">Current Value : <span id="work"></span></p>
</div>
<script>
var x = document.getElementById("tp");
var a = document.getElementById("work");
a.innerHTML = x.value;
x.oninput = function() {
a.innerHTML = this.value;
}
</script>
</body>
</html>
當我們執行上述程式碼時，它將生成一個輸出，其中包含顯示在網頁上的圓形範圍滑塊。當用戶滑動滑塊時，它將顯示滑塊當前指向的數字。
示例
考慮下面的示例，我們將建立一個顯示在網頁上的影像範圍滑塊。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
-webkit-appearance: none;
width: 100%;
height: 50px;
background: #DE3163;
opacity: 0.5;
transition: opacity .3s;
}
.tutorial:hover {
opacity: 2;
}
.tutorial::-webkit-slider-thumb {
-webkit-appearance: none;
width: 150px;
height: 190px;
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoBZtgd1G271O9xwDDuwfU3uBS5C_CNpBpgg&usqp=CAU');
cursor: pointer;
}
</style>
</head>
<body>
<h2 style="font-family:verdana">Image Range Slider</h2>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="slidecontainer">
<input type="range" min="5" max="100" value="15" class="tutorial" id="tp">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Current Value : <span id="work"></span>
</p>
</div>
<script>
var x = document.getElementById("tp");
var a = document.getElementById("work");
a.innerHTML = x.value;
x.oninput = function() {
a.innerHTML = this.value;
}
</script>
</body>
</html>
執行上述程式碼後，輸出視窗將彈出，在網頁上顯示影像範圍滑塊。當用戶移動影像時，它指示滑塊停止時的值。
更新於: 2024年1月22日
870 次檢視
廣告