Cara membuat gelangsar julat tersuai menggunakan CSS

CSS tulen mencipta slider pelbagai adat yang sejuk: Tiada JavaScript diperlukan, kedua -dua kebolehcapaian

Artikel ini akan menunjukkan cara membuat slider skop tersuai menggunakan hanya CSS dan elemen HTML <input type="range"> asli tanpa bergantung pada JavaScript sambil memastikan kebolehcapaian. Tutorial meliputi cara untuk menyesuaikan elemen input, termasuk menetapkan semula dan melumpuhkan gaya lalai penyemak imbas, menetapkan gaya slider, dan mewujudkan kesan kecerunan gelongsor menggunakan border-image. Di samping itu, ia akan dijelaskan bagaimana untuk menambah animasi halus untuk meningkatkan interaksi pengguna, seperti menukar slider dari bulatan sempadan sahaja ke bulatan penuh apabila diklik, dan menggelapkan warna apabila melayang. Teknologi ini mengekalkan ciri-ciri asli dan menyokong navigasi papan kekunci, menyediakan penyelesaian serba boleh dan mudah diakses untuk slider pelbagai adat.

Mata utama:

Buat slider skop tersuai menggunakan CSS tulen dan elemen HTML
• asli. <input type="range"> Tutorial
mengandungi langkah -langkah untuk menyesuaikan elemen input: Reset dan nyahdayakan gaya lalai penyemak imbas, tetapkan gaya slider, dan membuat kesan kecerunan gelongsor menggunakan
• . border-image
Tambah animasi halus untuk meningkatkan pengalaman pengguna, seperti menukar bentuk slider apabila diklik dan menukar warna apabila melayang.
Simpan fungsi asli dan menyokong navigasi papan kekunci untuk memastikan kebolehaksesan.

Gaya gelangsar julat lalai tidak cantik. Angka berikut menunjukkan kesan paparan slider julat lalai dalam pelayar Chrome, Firefox dan Safari:

Walau bagaimanapun, unsur -unsur sukar untuk gaya. Kebanyakan penyelesaian dalam talian bergantung kepada JavaScript dan kod verbose. Lebih buruk lagi, beberapa teknologi juga boleh memusnahkan akses unsur -unsur. Oleh itu, mari kita lihat cara menggunakan CSS tulen untuk mencapai tanpa menjejaskan kebolehaksesan. Demonstrasi codepen berikut menunjukkan apa yang akan kita bina:

pautan codepen

<input type="range"> Struktur elemen input jarak

mari kita menganalisis struktur elemen input jarak terlebih dahulu. Ia adalah elemen asli dan setiap penyemak imbas mempunyai pelaksanaannya sendiri. Terdapat dua pelaksanaan utama: satu untuk penyemak imbas WebKit dan Blink (seperti Chrome, Edge, Safari dan Opera):

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

Satu lagi untuk Firefox:

IE juga mempunyai pelaksanaan ketiga, tetapi bernasib baik, penyemak imbas ini hampir hilang sekarang! Ketidakkonsistenan antara pelayar menjadikan tugas sukar kerana kita perlu menyediakan gaya yang berbeza untuk setiap pelaksanaan. Saya tidak akan masuk ke dalam ini secara mendalam kerana jawatan ini tidak akan selesai, tetapi saya sangat mengesyorkan membaca siaran ini oleh Ana Tudor untuk penerokaan yang lebih mendalam (pautan pos harus dimasukkan di sini). Anda hanya perlu ingat bahawa tidak kira pelaksanaannya, "slider" (ibu jari) sentiasa menjadi komponen biasa.

Saya hanya akan gaya elemen ini, yang akan menjadikan slider skop tersuai saya mudah disesuaikan. Mari melompat terus ke dalam kod dan lihat apa yang menakjubkan.

Elemen Input Custom

Langkah pertama adalah menggunakan

dan beberapa sifat umum lain untuk menetapkan semula dan melumpuhkan semua gaya lalai penyemak imbas: appearance: none

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

Dalam kes yang lebih kompleks, jika gaya lalai lain digunakan untuk elemen kita, kita mungkin perlu menambah lebih banyak kod. Hanya pastikan kami mempunyai elemen "telanjang" tanpa gaya visual. Mari kita tentukan beberapa pembolehubah CSS supaya kita dapat dengan mudah membuat varian yang berbeza untuk gelangsar julat:

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

Dalam langkah ini, hanya slider dan gaya lalai yang dapat dilihat.

Tetapkan gaya elemen slider

Mari gaya elemen gelangsar. Kami akan bermula dengan tetapan asas:

<code class="language-css">input {
  appearance: none;
  background: none;
  cursor: pointer;
}</code>

Gunakan Tambahkan beberapa kesan ajaib border-image

Sekarang kita akan menggunakan trik Magic CSS untuk melengkapkan slider kami. Ia melibatkan penggunaan

: border-image

<code class="language-css">input {
  --c: orange; /* 活动颜色 */
  --g: 8px; /* 间隙 */
  --l: 5px; /* 线粗细 */
  --s: 30px; /* 滑块大小 */

  width: 400px; /* 输入宽度 */
  height: var(--s);
  appearance: none;
  background: none;
  cursor: pointer;
}</code>

halusinasi adalah sempurna dengan menambahkan

ke elemen input dan menggunakan nilai yang lebih besar. overflow: hidden

Tambah beberapa animasi

Bolehkah kita menambah beberapa animasi halus apabila berinteraksi dengan gelangsar? Ia tidak memerlukan banyak kod dan akan meningkatkan UX slider. Pertama, kita menukar gelangsar dari bulatan sempadan sahaja ke bulatan penuh apabila diklik. Untuk melakukan ini, kami menambah nilai

box-shadow. spread

Kesimpulan

kami telah melakukannya dan tidak perlu berurusan dengan pelaksanaan yang berkaitan dengan pelayar yang kompleks! Kami mengenal pasti pemilih untuk elemen slider dan menggunakan beberapa helah CSS untuk gaya keseluruhan julat slider. Jangan lupa, kami hanya menggunakan elemen

, jadi kami tidak perlu bimbang tentang sebarang isu kebolehaksesan kerana kami menyimpan ciri -ciri asli. Slider menyokong navigasi papan kekunci tanpa sebarang masalah. Berikut adalah lebih banyak contoh slider yang dibuat dengan teknik yang sama: <input type="range"> pautan codepen

codepen link

Atas ialah kandungan terperinci Cara membuat gelangsar julat tersuai menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!