Range Sliders เก็บค่าตัวเลขด้วย range sliders

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderators: mindphp, ผู้ดูแลกระดาน

benzas00123
PHP Super Member
PHP Super Member
Posts: 244
Joined: 06/01/2020 9:58 am

Range Sliders เก็บค่าตัวเลขด้วย range sliders

Post by benzas00123 »

Range Sliders คือ การเก็บค่าแบบที่เราจะต้อง เลื่อนสกอร์ จากซ้ายไปขวาโดยเราสามารถกำหนดค่า min และ max ของตัว สกอร์ได้โดยใช้ bootstrap 3 บางครั้งการที่เราสร้างเว็ปปรกติแบบไม่มีลูกเล่นอาจจะทำให้ผู้ใช้งานรู้สึกเบื่อได้ แต่ถ้าหากเราเพิ่มลูกเล่นหรือปรับเปลี่ยนวิธีการคีย์ข้อมูลก็จะทำให้ตัวโปรแกรมของเราน่าสนใจมากยิ่งขึ้น วันนี้ผมจึงมาแนะนำการเก็บข้องมูลโดยใช้ Rang Sliders

รูปตัวอย่าง
Booststap Knowledge-1.png
Booststap Knowledge-1.png (2.19 KiB) Viewed 482 times
โดย code หลักๆ จะเริ่มจากทำการสร้างตัว Sliders ก่อน

Code: Select all

    <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>
หลังจากนั้นเราทำการสร้างฟังก์ชั่นในการเก็บค่า value ของตัว slider กับ นำเลขมาโชวน์ในค่าของ Value โดยจะใช้ ภาษา Javascript ในการเขียน
เริ่มจากเขียนฟังก์ชั่นในการแสดงค่า default ของตัว value สะก่อน

Code: Select all

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
และเมื่อเราทำการขยับสกอร์เราจะทำการอัพเดทค่าในตำแหน่งล่าสุด

Code: Select all

slider.oninput = function() {
  output.innerHTML = this.value;
}
fullcode

Code: Select all

<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/

LEG
PHP Sr. Member
PHP Sr. Member
Posts: 96
Joined: 12/07/2019 2:54 pm
Contact:

Re: Range Sliders เก็บค่าตัวเลขด้วย range sliders

Post by LEG »

ยอดเยี่ยมมากๆครับ :like:
ศูนย์รวมเครื่องวัดคุณภาพ https://legatool.com/
ผู้เชี่ยวชาญของตลาดเครื่องมือวัด อุปกรณ์ทดสอบ และชุดทดสอบที่ใหญ่ที่สุดในประเทศไทย

Post Reply

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 4 guests