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

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

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

benzas00123
PHP Super Member
PHP Super Member
โพสต์: 244
ลงทะเบียนเมื่อ: 06/01/2020 9:58 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย benzas00123 »

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

รูปตัวอย่าง
Booststap Knowledge-1.png
Booststap Knowledge-1.png (2.19 KiB) Viewed 2668 times
โดย 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>
หลังจากนั้นเราทำการสร้างฟังก์ชั่นในการเก็บค่า value ของตัว slider กับ นำเลขมาโชวน์ในค่าของ Value โดยจะใช้ ภาษา Javascript ในการเขียน
เริ่มจากเขียนฟังก์ชั่นในการแสดงค่า default ของตัว value สะก่อน

โค้ด: เลือกทั้งหมด

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

โค้ด: เลือกทั้งหมด

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

โค้ด: เลือกทั้งหมด

<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 Hero Member
PHP Hero Member
โพสต์: 105
ลงทะเบียนเมื่อ: 12/07/2019 2:54 pm
ติดต่อ:

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

โพสต์ที่ยังไม่ได้อ่าน โดย LEG »

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

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 32