รูปตัวอย่าง โดย code หลักๆ จะเริ่มจากทำการสร้างตัว Sliders ก่อน
โค้ด: เลือกทั้งหมด
<div class="form-group">
<div class="col-sm-5 col-sm-offset-1">
<div class="d-flex justify-content-center ">
<form class="range-field w-25">
<input class="border-0" type="range" min="0" max="100" id="myRange" value="100"/>
<p>Value: <span id="demo"></span></p>
</form>
</div>
เริ่มจากเขียนฟังก์ชั่นในการแสดงค่า default ของตัว value สะก่อน
โค้ด: เลือกทั้งหมด
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
โค้ด: เลือกทั้งหมด
slider.oninput = function() {
output.innerHTML = this.value;
}
โค้ด: เลือกทั้งหมด
<body>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-1">
<div class="d-flex justify-content-center ">
<form class="range-field w-25">
<input class="border-0" type="range" min="0" max="100" id="myRange" value="100"/>
<p>Value: <span id="demo"></span></p>
</form>
</div>
</form>
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
https://www.w3schools.com/howto/howto_js_rangeslider.asp
https://mdbootstrap.com/docs/jquery/forms/slider/
https://mdbootstrap.com/plugins/jquery/multi-range/