Bagaimana untuk membuat slider pelbagai gaya yang boleh disesuaikan dengan CSS?

Untuk membuat gelangsar pelbagai yang disesuaikan, anda perlu merancang gaya melalui CSS Pseudo-Elements dan pemilih khusus pelayar; 1. Gunakan struktur HTML standard untuk menentukan nilai minimum, maksimum dan lalai slider; 2. Penggunaan ::-WebKit-Slider-Runnable-Track dan ::-Moz-range-track untuk gaya trek gelangsar untuk WebKit dan Firefox Browsers masing-masing; 3. Penggunaan ::-WebKit-Slider-Thumb dan ::-Moz-Range-Thumb untuk menyesuaikan pemegang gelangsar, dan keluarkan penampilan lalai di WebKit; 4. Tambah: Hover dan: Negara Aktif untuk meningkatkan pengalaman interaktif; 5. Gunakan JavaScript untuk mengemas kini kecerunan latar belakang secara dinamik untuk mencapai maklum balas visual pada bahagian yang dipilih dari slider; 6. Mengintegrasikan semua gaya dan pastikan keserasian penyemak imbas dalam contoh penuh; Berakhir dengan gelangsar adat moden, cantik dan berfungsi, sambil mengekalkan kebolehcapaian dan respons.

Mewujudkan slider pelbagai gaya yang boleh disesuaikan dengan CSS melibatkan gaya <input type="range"> di seluruh pelayar yang berbeza, kerana setiap menjadikannya secara berbeza secara lalai. Dengan campuran elemen pseudo CSS dan pemilih khusus penyemak imbas, anda boleh menyesuaikan sepenuhnya penampilan, ibu jari, dan negeri-negeri yang aktif-sambil mengekalkannya dan berfungsi.

Berikut adalah cara untuk membina gelangsar jarak yang bersih, moden, dan penuh gaya menggunakan HTML dan CSS.

1. Struktur HTML Asas

Mulakan dengan input julat mudah:

 <input type = "range" class = "slider" min = "0" max = "100" value = "50">

Ini mewujudkan gelangsar lalai dari 0 hingga 100, bermula pada 50.

2. Gaya trek gelangsar (penyemak imbas)

Lagu ini digayakan secara berbeza di WebKit (Chrome, Safari, Edge) dan Firefox. Anda perlu menargetkan kedua -duanya.

WebKit (Chrome, Safari, Edge)

Gunakan ::-webkit-slider-runnable-track :

 .Slider ::-WebKit-Slider-Runnable-Track {
  Lebar: 100%;
  Ketinggian: 8px;
  Latar Belakang: #ddd;
  Radius sempadan: 4px;
  kursor: penunjuk;
}

Firefox

Gunakan ::-moz-range-track :

 .Slider ::-Moz-Range-Track {
  Lebar: 100%;
  Ketinggian: 8px;
  Latar Belakang: #ddd;
  Radius sempadan: 4px;
  kursor: penunjuk;
}

Nota: Firefox menggunakan ::-moz-range-track , manakala WebKit menggunakan ::-webkit-slider-runnable-track .

3. Gaya jempol gelangsar (pemegang)

Pemegang draggable juga memerlukan awalan khusus penyemak imbas.

WebKit

 .Slider ::-WebKit-Slider-Thumb {
  -Webkit-appearing: Tiada;
  Penampilan: Tiada;
  lebar: 20px;
  Ketinggian: 20px;
  Latar Belakang: #4CAF50;
  Radius sempadan: 50%;
  kursor: penunjuk;
  margin -top: -6px; / * Align secara menegak dengan trek */
}

-webkit-appearance: none Menghilangkan gaya lalai supaya anda boleh menggunakan gaya tersuai.

Firefox

 .Slider ::-Moz-range-thumb {
  lebar: 20px;
  Ketinggian: 20px;
  Latar Belakang: #4CAF50;
  Sempadan: Tiada;
  Radius sempadan: 50%;
  kursor: penunjuk;
}

Firefox's ::-moz-range-thumb adalah lebih mudah-tidak memerlukan appearance: none .

4. Tambah keadaan hover dan aktif

Jadikan gelangsar berasa interaktif:

 .Slider: Hover ::-WebKit-Slider-Thumb {
  Latar Belakang: #45A049;
}

.Slider: Hover ::-Moz-Range-Thumb {
  Latar Belakang: #45A049;
}

.Slider: Active ::-WebKit-Slider-Thumb {
  Transform: Skala (1.15);
}

.Slider: Aktif ::-Moz-Range-Thumb {
  Transform: Skala (1.15);
}

Anda juga boleh gaya trek secara berbeza apabila aktif (misalnya, tukar warna sebagai pengguna menyeret).

5. Pilihan: Gaya bahagian aktif (kemajuan) trek

Untuk menunjukkan bahagian "diisi" trek (sebelah kiri sehingga ibu jari), anda memerlukan markup tambahan atau elemen pseudo. Oleh kerana CSS tidak dapat secara langsung gaya "sebelum" sebahagian trek dalam input standard, satu penyelesaian menggunakan pembungkus dan kecerunan latar belakang.

Contoh Menggunakan Kecerunan Latar Belakang:

 .slider {
  -Webkit-appearing: Tiada;
  Lebar: 100%;
  Ketinggian: 8px;
  Latar Belakang: Linear-Gradient (
    ke kanan,
    #4CAF50 0%,
    #4CAF50 50%,
    #ddd 50%,
    #ddd 100%
  );
  Garis besar: Tiada;
  Radius sempadan: 4px;
  Kelegapan: 0.9;
  Peralihan: Opacity .2s;
}

Tetapi ini memerlukan JavaScript untuk mengemas kini kecerunan berdasarkan nilai.

Pendekatan yang lebih baik: Gunakan pembalut dengan elemen pseudo

 

  <input type = "range" class = "slider" min = "0" max = "100" value = "50">

Kemudian gunakan CSS untuk lapisan trek dan isi:

 .slider-wrapper {
  Kedudukan: Relatif;
  Lebar: 100%;
}

.slider {
  -Webkit-appearing: Tiada;
  Lebar: 100%;
  Ketinggian: 8px;
  Latar Belakang: Telus;
  Garis besar: Tiada;
}

.Slider ::-WebKit-Slider-Runnable-Track {
  Latar Belakang: #ddd;
  Ketinggian: 8px;
  Radius sempadan: 4px;
}

/ * Mengisi adat menggunakan pseudo-element (melalui JS atau css lanjutan) */

Untuk mengisi dinamik, JavaScript biasanya diperlukan:

 const slider = document.QuerySelector ('. slider');
slider.addeventListener ('input', () => {
  const peratus = (slider.value / (slider.max - slider.min)) * 100;
  slider.style.background = `linear-gradient (ke kanan, #4CAF50 $ {peratus}%, #ddd $ {peratus}%)`;
});

Kemudian masukkan ke CSS:

 .slider {
  Latar Belakang: Linear-Gradient (ke kanan, #4CAF50 50%, #DDD 50%);
  Latar Belakang: 100% 8px;
  Latar Belakang berulang: tidak berulang;
  Radius sempadan: 4px;
}

Sekarang trek menunjukkan kemajuan berwarna secara dinamik.

6. Contoh minimum penuh

 <! Doctype html>
<html lang = "en">
<head>
  <meta charset = "utf-8" />
  <tirly> Slider Julat Custom </title>
  <yaya>
    .slider {
      -Webkit-appearing: Tiada;
      Lebar: 100%;
      Ketinggian: 8px;
      Latar Belakang: #ddd;
      Radius sempadan: 4px;
      Garis besar: Tiada;
      Kelegapan: 0.9;
      Peralihan: Opacity .2s;
    }

    .slider: hover {
      Kelegapan: 1;
    }

    .Slider ::-WebKit-Slider-Runnable-Track {
      Latar Belakang: #ddd;
      Ketinggian: 8px;
      Radius sempadan: 4px;
    }

    .Slider ::-WebKit-Slider-Thumb {
      -Webkit-appearing: Tiada;
      Penampilan: Tiada;
      lebar: 20px;
      Ketinggian: 20px;
      Latar Belakang: #4CAF50;
      Radius sempadan: 50%;
      kursor: penunjuk;
      margin -top: -6px;
    }

    .Slider ::-Moz-Range-Track {
      Lebar: 100%;
      Ketinggian: 8px;
      Latar Belakang: #ddd;
      Radius sempadan: 4px;
      kursor: penunjuk;
    }

    .Slider ::-Moz-range-thumb {
      lebar: 20px;
      Ketinggian: 20px;
      Latar Belakang: #4CAF50;
      Sempadan: Tiada;
      Radius sempadan: 50%;
      kursor: penunjuk;
    }

    .Slider: Hover ::-WebKit-Slider-Thumb,
    .Slider: Hover ::-Moz-Range-Thumb {
      Latar Belakang: #45A049;
    }

    .Slider: Active ::-WebKit-Slider-Thumb {
      Transform: Skala (1.15);
    }

    .Slider: Aktif ::-Moz-Range-Thumb {
      Transform: Skala (1.15);
    }
  </gaya>
</head>
<body>
  <input type = "julat" class = "slider" min = "0" max = "100" value = "50" />
</body>
</html>

Petua utama

• Sentiasa menguji dalam pelbagai pelayar (Chrome, Firefox, Safari, Edge).
• Gunakan appearance: none hanya pada ibu jari di WebKit.
• Untuk visual yang lebih maju (seperti dua ibu jari atau tooltips), pertimbangkan perpustakaan atau komponen React/Vue Custom.
• Kebolehcapaian dipelihara selagi anda tidak mengeluarkan sokongan papan kekunci atau peranan ARIA.

Itu sahaja. Anda kini mempunyai slider pelbagai yang tersuai, dengan gaya yang bersih, moden dan sokongan silang penyemak imbas. Pada dasarnya hanya mengatasi kegagalan dan kreatif dengan warna, bayang -bayang, dan peralihan.

Atas ialah kandungan terperinci Bagaimana untuk membuat slider pelbagai gaya yang boleh disesuaikan dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!