ในการสร้างแถบเลื่อนช่วงที่กำหนดเองด้วย CSS และ JavaScript โค้ดจะเป็นดังนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #e478ff;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
border-radius: 20px;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%;
appearance: none;
width: 45px;
height: 45px;
background: rgb(200, 255, 0);
border: 6px solid rgb(0, 105, 44);
cursor: pointer;
}
.slider::-moz-range-thumb {
border-radius: 20px;
width: 25px;
height: 25px;
background: rgb(200, 255, 0);
border: 6px solid rgb(0, 105, 44);
cursor: pointer;
}
</style>
</head>
<body>
<h1>Custom Range Slider Example</h1>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" />
</div>
<h2 class="sliderVal">T</h2>
<script>
var slider = document.querySelector(".slider");
var output = document.querySelector(".sliderVal");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
</html> ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -
