หลักการสร้าง: สวิทช์ลูกเลื่อน

สร้างสวิทช์ลูกเลื่อน

ขั้นที่ 1 - เพิ่ม HTML:

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

ขั้นที่ 2 - เพิ่ม CSS:

.slidecontainer {
  width: 100%; /* ความกว้างของตัวจัดเก็บด้านนอก */
{}
/* ตัวลูกเลื่อนตัวเอง */
.slider {
  -webkit-appearance: none;  /* ซ้ำรูปแบบ CSS โดยเริ่มต้น */
  appearance: none;
  width: 100%; /* ความกว้างทั้งหมด */
  height: 25px; /* ความสูงที่กำหนด */
  background: #d3d3d3; /* สีม่วง */
  outline: none; /* ลบรอยลาย */
  opacity: 0.7; /* ตั้งค่าความโปร่งใส (ใช้ในปรากฏผลเมื่อเห็นด้วยเมาส์) */
  -webkit-transition: .2s; /* 0.2 วินาทีของปรากฏผลการเปลี่ยนแปลง */
  transition: opacity .2s;
{}
/* ปรากฏผลเมื่อเห็นด้วยเมาส์ */
.slider:hover {
  opacity: 1; /* แสดงครบถ้วนเมื่อเห็นด้วยเมาส์ */
{}
/* ต่อยื่นแบบต่างๆของตัวจับลูกเลื่อน (ใช้ -webkit- สำหรับ Chrome, Opera, Safari, Edge และ -moz- สำหรับ Firefox เพื่อซ้ำรูปแบบโดยเริ่มต้น) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* ซ้ำด้วยรูปแบบโดยเริ่มต้น */
  appearance: none;
  width: 25px; /* กำหนดความกว้างของตัวยื่นลูกของตัวยื่น */
  height: 25px; /* ความสูงของตัวยื่นลูกของตัวยื่น */
  background: #04AA6D; /* สีเขียว */
  cursor: pointer; /* ตะหวนคอมมานด์เมาส์ในขณะหยุดเคลื่อนที่ */
{}
.slider::-moz-range-thumb {
  width: 25px; /* กำหนดความกว้างของตัวยื่นลูกของตัวยื่น */
  height: 25px; /* ความสูงของตัวยื่นลูกของตัวยื่น */
  background: #04AA6D; /* สีเขียว */
  cursor: pointer; /* ตะหวนคอมมานด์เมาส์ในขณะหยุดเคลื่อนที่ */
{}

亲自试一试

ขั้นที่สาม - เพิ่ม JavaScript:

สร้างตัวยื่นเลื่อนสเปกตรัมในแบบดนตรี JavaScript ในการแสดงค่าปัจจุบัน:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // แสดงค่าตัวยื่นเริ่มต้น
// ปรับปรุงค่าตัวยื่นในตอนนี้ (ในทุกครั้งที่เลื่อนลูกของตัวยื่น)
slider.oninput = function() {
  output.innerHTML = this.value;
{}

亲自试一试

ปุ่มลูกยื่นทรงกลม

เพื่อสร้างปุ่มลูกของตัวยื่นที่เป็นทรงกลม ใช้ border-radius ขอบเขต

คำเตือน:หากคุณต้องการความสูงที่ไม่เท่ากัน (ในตัวอย่างนี้คือ 15 พิกเซล และ 25 พิกเซล) โปรดตั้งความสูงของตัวยื่นเป็นค่าที่ต่างจากความสูงของทูนี่ซึ่งตัวยื่นเลื่อน:

ตัวอย่าง

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
{}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #04AA6D;
  cursor: pointer;
{}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
{}

亲自试一试

รูปภาพ/ภาพวาดตัวยื่นเลื่อน

เพื่อสร้างปุ่มลูกของตัวยื่นที่มีรูปภาพ/ภาพวาด ใช้ background แนะนำประกาศ URL ภาพ:

ตัวอย่าง

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border: 0;
  background: url('contrasticon.png');
  cursor: pointer;
{}
.slider::-moz-range-thumb {
  width: 23px;
  height: 25px;
  border: 0;
  background: url('contrasticon.png');
  cursor: pointer;
{}

亲自试一试