เลื่อนมูลนิธิ

มูลนิธิเลื่อนช่วยให้ผู้ใช้สามารถเลือกช่วงของค่าโดยการลาก:

Slider โดยใช้ <div class="range-slider" data-slider> " data-เลื่อน> สร้าง ใน <div> ภายในเพิ่มสอง <span> องค์ประกอบ: <span class="range-slider-handle"> สร้างเลื่อนสี่เหลี่ยม (พื้นหลังสีฟ้า) <span class="range-slider-active-segment"> ในการเลื่อนแถบสีเทาหลังจากพื้นที่แถบเลื่อน

หมายเหตุ: เลื่อนต้องการ JavaScript ดังนั้นคุณต้องเริ่มต้น JS oundation:

เนื้อและปิดการใช้เลื่อน

ใช้ .radius และ .round ชั้นเรียนเพื่อเพิ่มมุมโค้งมนเลื่อน ใช้ .disabled ระดับปิดการใช้งานตัวเลื่อน:

เลื่อนแนวตั้ง

ใช้ .vertical-range ชั้นเรียนและ data-options="vertical: true;" ;" เพื่อสร้างเลื่อนแนวตั้ง:

ค่า Slider

โดยค่าเริ่มต้นแถบเลื่อนในช่วงกลางของ (ค่า "50") เดอะ คุณสามารถเพิ่ม data-options="initial: num " " การปรับเปลี่ยนค่าเริ่มต้นของทรัพย์สิน:

ค่าเลื่อนการแสดงผล

ถ้าเราต้องการที่จะลากมูลค่าเลื่อนเมื่อจอแสดงผลแบบ real-time สามารถรับได้โดย <div> เพิ่ม data-options="display_selector:# id " ID ตรงกับแอตทริบิวต์ ID และความคุ้มค่าขององค์ประกอบเลื่อนที่เป็นตัวอย่าง:

การรวมกันของตัวเลือกข้อมูล

ตัวอย่างต่อไปนี้ใช้ display_selector และ initial ตัวเลือกข้อมูล:

ขั้นตอน? ยาว

โดยค่าเริ่มต้นเลื่อนจะถูกย้ายไปเพื่อลดการเพิ่มขึ้นในจำนวนที่ "1" คุณสามารถเพิ่ม data-options="step: num ;" ;" แอตทริบิวต์การปรับเปลี่ยนค่าขั้นตอน ?. ตัวอย่างเช่นมีการตั้งค่า 25:

ช่วงเวลาที่กำหนดเอง

โดยค่าเริ่มต้นค่าในช่วงของ "0" ที่ "100" คุณสามารถเพิ่มตัวเลือกข้อมูล start และ end ในการตั้งค่าช่วงเวลา ตัวอย่างต่อไปนี้ตั้งค่าช่วงเวลาของ "1" ถึง "20":

โดยใช้ตาราง

ใช้ต่อไปนี้เพื่อใช้แถบเลื่อนในตาราง:

ใช้การป้อนข้อมูล

ตัวอย่างต่อไปนี้ใช้ <input> แทนที่ <span> เพื่อแสดงค่าของตัวเลื่อนไปนี้: