Slider Multi-Thumb: Kes Umum

Bahagian pertama siri dua bahagian ini terperinci bagaimana kita boleh mendapatkan slider dua thumb. Sekarang kita akan melihat kes multi-thumb umum, tetapi dengan teknik yang berbeza dan lebih baik untuk membuat mengisi di antara ibu jari. Dan akhirnya, kami akan menyelam ke dalam bagaimana di belakang gaya slider yang kelihatan realistik dan yang rata.

Siri Artikel:

1. Slider Multi-Thumb: Kes dua thumb tertentu
2. Slider Multi-Thumb: Kes Umum (jawatan ini)

Pendekatan yang lebih baik dan lebih fleksibel

Katakan bahawa, pada pseudo-elemen pembungkus yang meliputi kawasan yang sama seperti input pelbagai, kita menyusun lapisan linear-gradient () yang sepadan dengan setiap ibu jari. Setiap lapisan kecerunan adalah legap sepenuhnya (iaitu alpha adalah 1) dari trek minimum sehingga garis tengah ibu jari, selepas itu ia sepenuhnya telus (iaitu alpha adalah 0).

Perhatikan bahawa nilai RGB tidak penting kerana semua yang kita sayangi adalah nilai alfa. Saya secara peribadi menggunakan merah (untuk bahagian legap sepenuhnya) dan kata kunci telus dalam kod kerana mereka melakukan pekerjaan dengan jumlah paling sedikit aksara.

Bagaimanakah kita mengira kedudukan berhenti kecerunan di mana kita pergi dari legap sepenuhnya ke telus sepenuhnya? Nah, kedudukan ini sentiasa terletak di antara radius ibu jari dari tepi kiri dan radius ibu jari dari tepi kanan, jadi mereka berada dalam julat yang sama dengan lebar berguna (lebar trek, tolak diameter ibu jari).

Ini bermakna kita mula-mula menambah jejari ibu jari. Kemudian kita mengira kemajuan dengan membahagikan perbezaan antara kedudukan ibu jari semasa dan minimum kepada perbezaan (---fif) antara maksimum dan minimum. Nilai kemajuan ini adalah nombor dalam selang [0, 1] - iaitu 0 apabila kedudukan ibu jari semasa berada pada minimum slider, dan 1 apabila kedudukan ibu jari semasa berada pada maksimum slider. Untuk mendapatkan di mana tepat sepanjang selang lebar yang berguna, kami membiak nilai kemajuan ini dengan lebar yang berguna.

Kedudukan yang kita selepas adalah jumlah antara kedua -dua nilai panjang ini: jejari ibu jari dan sejauh mana kita berada di seluruh selang lebar yang berguna.

Demo di bawah ini membolehkan kita melihat bagaimana segala-galanya kelihatan disusun dalam paparan 2D dan bagaimana tepatnya input pelbagai dan kecerunan pada elemen pseudo ibu bapa mereka berlapis dalam paparan 3D. Ia juga interaktif, jadi kita boleh menyeret ibu jari slider dan melihat bagaimana pengisian yang sepadan (yang dicipta oleh lapisan kecerunan pada elemen pseudo-elemen).

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Demo ini paling baik dilihat dalam Chrome dan Firefox.

Baiklah, tetapi hanya menyusun lapisan kecerunan ini tidak memberi kami hasil yang kami selepas.

Penyelesaian di sini adalah untuk membuat lapisan topeng kecerunan ini dan kemudian xor mereka (lebih tepatnya, dalam hal topeng CSS, ini bermakna untuk xor alphas mereka).

Sekiranya anda memerlukan penyegaran tentang bagaimana XOR berfungsi, inilah satu: diberi dua input, output operasi ini adalah 1 Jika nilai input berbeza (salah satu daripada mereka adalah 1 dan yang lain adalah 0) dan 0 jika nilai input adalah sama (kedua -duanya adalah 0 atau kedua -duanya adalah 1)

Jadual kebenaran untuk operasi XOR kelihatan seperti berikut:

Input		Output
A	B
0	0	0
0	1	1
1	0	1
1	1	0

Anda juga boleh bermain dengannya dalam demo interaktif berikut, di mana anda boleh menukar nilai input dan melihat bagaimana output berubah:

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Dalam kes kami, nilai input adalah alphas lapisan topeng kecerunan di sepanjang paksi mendatar. Xor-ing berbilang lapisan bermakna berbuat demikian untuk dua yang pertama dari bahagian bawah, kemudian xor-ing yang ketiga dari bawah dengan hasil operasi XOR sebelumnya dan sebagainya. Untuk kes kami kecerunan kiri-ke kanan dengan alpha sama dengan 1 hingga satu titik (diputuskan oleh nilai ibu jari yang sepadan) dan kemudian 0, ia kelihatan seperti digambarkan di bawah (kita bermula dari bawah dan bekerja di atas):

Di mana kedua-dua lapisan dari bahagian bawah mempunyai alpha 1, lapisan yang dihasilkan yang kita dapatkan selepas xor-ing mereka mempunyai alpha 0. Di mana mereka mempunyai nilai alfa yang berbeza, lapisan yang dihasilkan mempunyai alpha 1.

Bergerak, kami xor lapisan ketiga dengan lapisan yang dihasilkan yang kami dapat pada langkah sebelumnya. Di mana kedua -dua lapisan ini mempunyai alpha yang sama, alpha lapisan yang dihasilkan dari operasi XOR kedua ini adalah 0. Di mana mereka mempunyai alpha yang berbeza, alpha yang dihasilkan adalah 1.

Begitu juga, kita kemudian xor lapisan keempat dari bahagian bawah dengan lapisan yang terhasil dari operasi XOR peringkat kedua.

Dari segi CSS, ini bermakna menggunakan nilai tidak termasuk untuk komposit topeng standard dan nilai XOR untuk komposit-composite-webkit-mask. (Untuk pemahaman yang lebih baik mengenai komposit topeng, periksa kursus kemalangan.)

Teknik ini memberikan kita hasil yang kita mahu sambil membolehkan kita menggunakan satu elemen pseudo untuk semua yang mengisi. Ia juga merupakan teknik yang berfungsi untuk beberapa ibu jari. Mari lihat bagaimana kita boleh memasukkannya ke dalam kod!

Untuk memastikan perkara -perkara yang fleksibel sepenuhnya, kita mulakan dengan mengubah kod PUG supaya ia membolehkan untuk menambah atau mengeluarkan ibu jari dan mengemas kini segala -galanya dengan sewajarnya dengan hanya menambah atau mengeluarkan item dari pelbagai objek ibu jari, di mana setiap objek mengandungi nilai dan label (yang hanya akan menjadi pembaca skrin):

 - biarkan min = -50, max = 50;
- biarkan ibu jari = [
- {val: -15, lbl: 'nilai a'}, 
- {val: 20, lbl: 'value b'}, 
- {val: -35, lbl: 'value c'}, 
- {val: 45, lbl: 'value d'}
-];
- biarkan nv = thumbs.length;

.Wrap (peranan = 'kumpulan' aria-labelledby = 'multi-lbl' 
      gaya = `$ {thumbs.map ((c, i) =>` --v $ {i}: $ {c.val} `) .join (';')}; 
             --min: $ {min}; --max: $ {max} `)
  #Multi-LBL Multi Thumb Slider:
    - untuk (biarkan i = 0; i <nv i label.sr-only .lbl input id="`v" min="min" value="thumbs" .val max="max)" output style="`--c:" var><p> Dalam kes tertentu empat nilai yang tepat, markup yang dihasilkan kelihatan seperti berikut:</p>
<pre rel="HTML"> <div class="'wrap'" role="'kumpulan'" aria-labelledby="'multi-lbl'" gaya="'-v0:">
  <div id="'multi-lbl'"> slider multi thumb: </div>
  <label class="'sr-only'" for="'v0'"> nilai a </label>
  <input type="'range'" id="'v0'" min="'-50'" value="'-15'" max="'50">
  <output untuk="'v0'" style="'-c:" var> </output>
  <label class="'sr-only'" untuk="'v1'"> nilai b </label>
  <input type="'range'" id="'v1'" min="'-50'" value="'20">
  <output untuk="'v1'" style="'-c:" var> </output>
  <label class="'sr-only'" untuk="'v2'"> nilai c </label>
  <input type="'range'" id="'v2'" min="'-50'" value="'-35'" max="'50">
  <output untuk="'v2'" style="'-c:" var> </output>
  <label class="'sr-only'" untuk="'v3'"> nilai d </label>
  <input type="'range'" id="'v3'" min="'-50'" value="'45">
  <output untuk="'v3'" style="'-c:" var> </output>
</div>

Kami tidak perlu menambah apa -apa kepada CSS atau JavaScript untuk ini untuk memberi kami slider berfungsi di mana nilai -nilai dapat dikemas kini semasa kami menyeret slider. Walau bagaimanapun, mempunyai empat elemen manakala grid pembalut masih mempunyai dua lajur akan memecahkan susun atur. Oleh itu, buat masa ini, kami mengeluarkan baris yang diperkenalkan untuk unsur -unsur , meletakkan unsur -unsur ini secara mutlak dan hanya menjadikannya kelihatan apabila yang sepadan difokuskan. Kami juga mengeluarkan sisa-sisa penyelesaian terdahulu yang menggunakan kedua-dua unsur-unsur pseudo pada pembalut.

 .Wrap {
  / * sama seperti sebelum */
  Grid-Template-rows: Max-Content #{$ H}; / * Hanya 2 baris sekarang */

  & :: selepas {
    Latar Belakang: #95A;
    // kandungan: ''; // Jangan paparkan buat masa ini
    Grid-lajur: 1/ span 2;
    grid-baris: 3;
  }
}

input [type = 'range'] {
  / * sama seperti sebelum */
  grid-baris: 2; / * baris terakhir adalah baris kedua sekarang */
}

output {
  warna: telus;
  Kedudukan: Mutlak;
  Kanan: 0;
	
  & :: selepas {
    Kandungan: kaunter (c);
    Reset Counter: C var (-C);
  }
}

Kami akan melakukan lebih banyak untuk mencadangkan hasilnya kemudian, tetapi buat masa ini, inilah yang kami ada:

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Seterusnya, kita perlu mendapatkan ibu jari untuk mengisi ibu jari. Kami melakukan ini dengan menjana lapisan topeng di pug dan meletakkannya di dalam harta custom -Fill pada pembungkus.

 //- sama seperti sebelumnya
-biarkan lapisan = thumbs.map ((c, i) => `linear-gradient (90deg, calc merah (var (-r) (var (-v $ {i})-var (-min))/var (-dif)*var (-uw)), telus 0)`);

.Wrap (peranan = 'kumpulan' aria-labelledby = 'multi-lbl' 
  gaya = `$ {thumbs.map ((c, i) =>` --v $ {i}: $ {c.val} `) .join (';')}; 
    --min: $ {min}; --max: $ {max};
    -Fill: $ {Layers.join (',')} `)
  // - sama seperti sebelumnya

HTML yang dihasilkan untuk kes tertentu empat ibu jari dengan nilai -nilai ini dapat dilihat di bawah. Perhatikan bahawa ini akan diubah secara automatik jika kita menambah atau mengeluarkan item dari array awal:

 <div class="'wrap'" role="'kumpulan'" aria-labelledby="'multi-lbl'" gaya="'-v0:" linear-gradient calc merah telus>
  <div id="'multi-lbl'"> slider multi thumb: </div>
  <label class="'sr-only'" for="'v0'"> nilai a </label>
  <input type="'range'" id="'v0'" min="'-50'" value="'-15'" max="'50">
  <output untuk="'v0'" style="'-c:" var> </output>
  <label class="'sr-only'" untuk="'v1'"> nilai b </label>
  <input type="'range'" id="'v1'" min="'-50'" value="'20">
  <output untuk="'v1'" style="'-c:" var> </output>
  <label class="'sr-only'" untuk="'v2'"> nilai c </label>
  <input type="'range'" id="'v2'" min="'-50'" value="'-35'" max="'50">
  <output untuk="'v2'" style="'-c:" var> </output>
  <label class="'sr-only'" untuk="'v3'"> nilai d </label>
  <input type="'range'" id="'v3'" min="'-50'" value="'45">
  <output untuk="'v3'" style="'-c:" var> </output>
</div>

Perhatikan bahawa ini bermakna kita perlu menghidupkan pembolehubah SASS yang berkaitan dengan dimensi ke dalam pembolehubah CSS dan menggantikan pembolehubah SASS dalam sifat yang menggunakannya:

 .Wrap {
  / * sama seperti sebelum */
  --W: 20EM;
  --h: 4EM;
  --d: calc (.5*var (-h));
  --r: calc (.5*var (-d));
  --uw: calc (var (-w)-var (-d));
  Latar Belakang: Linear-Gradient (0Deg, #ccc var (-H), telus 0);
  Grid-templat: max-content var (-h)/ var (-w);
  lebar: var (-w);
}

Kami menetapkan topeng kami oo pembungkus :: Selepas pseudo-element:

 .Wrap {
  / * sama seperti sebelum */
  
  & :: selepas {
    Kandungan: '';
    Latar Belakang: #95A;
    Grid-lajur: 1/ span 2;
    grid-baris: 2;

    / * versi webkit bukan standard */
    -WebKit-mask: var (-isi);
    -Webkit-Mask-Composite: xor;

    / * versi standard, disokong dalam Firefox */
    topeng: var (-isi);
    Composite Mask: Tidak termasuk;
  }
}

Sekarang kita mempunyai apa yang kita mahu dan perkara yang benar -benar keren tentang teknik ini adalah bahawa semua yang perlu kita lakukan untuk menukar bilangan ibu jari adalah menambah atau mengeluarkan objek ibu jari (dengan nilai dan label untuk setiap) ke array ibu jari dalam kod PUG - sama sekali tidak perlu diubah!

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Tweak Prettifikasi

Apa yang kita ada setakat ini adalah apa -apa tetapi penglihatan yang cantik. Oleh itu, mari mula memperbaikinya!

Pilihan #1: Penampilan yang realistik

Katakan kita mahu mencapai hasil di bawah:

Langkah pertama adalah untuk menjadikan trek ketinggian yang sama seperti ibu jari dan pusingan trek berakhir. Hingga ke tahap ini, kami telah mencontohi trek dengan latar belakang pada elemen .wrap. Walaupun secara teknikalnya mungkin untuk mencontohi trek dengan hujung bulat dengan menggunakan linear berlapis dan kecerunan radial, ia benar-benar bukan penyelesaian terbaik, terutamanya apabila pembungkus masih mempunyai pseudo-unsur percuma (: sebelum).

 .Wrap {
  / * sama seperti sebelum */
  --h: 2EM;
  --d: var (-h);
  
  & :: sebelum ini, & :: selepas {
    Radius sempadan: var (-r);
    Latar Belakang: #CCC;
    Kandungan: '';
    Grid-lajur: 1/ span 2;
    grid-baris: 2;
  }
  
  & :: selepas {
    Latar Belakang: #95A;

    / * versi webkit bukan standard */
    -WebKit-mask: var (-isi);
    -Webkit-Mask-Composite: xor;

    / * versi standard, disokong dalam Firefox */
    topeng: var (-isi);
    Composite Mask: Tidak termasuk;
  }
} 

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Menggunakan :: Sebelum mencontohi trek membuka kemungkinan mendapatkan rupa sedikit 3D:

 <pre rel="scss"> <code> .wrap {
  / * sama seperti sebelum */
  
  & :: sebelum ini, & :: selepas {
    / * sama seperti sebelum */
    box-shadow: inset 0 2px 3px rgba (#000, .3);
  }
  
  & :: selepas {
    / * sama seperti sebelum */
    Latar Belakang: 
      Linear-Gradient (RGBA (#FFF, .3), RGBA (#000, .3))
      #95A;
  }
}</code>

Saya tidak semestinya seorang pereka, jadi nilai -nilai itu mungkin boleh ditapis untuk mendapatkan hasil yang lebih baik, tetapi kita sudah dapat melihat perbezaan:

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Ini meninggalkan kita dengan ibu jari yang benar -benar hodoh, jadi mari kita selesaikan bahagian itu juga!

Kami menggunakan teknik lapisan latar belakang yang berlapis dengan nilai-nilai latar belakang (dan latar belakang) yang berlainan.

 @mixin thumb () {
  Sempadan: Calc pepejal (.5*var (-r)) telus;
  Radius sempadan: 50%; / * membuat bulat */
  saiz kotak: kotak sempadan; / * Berbeza antara Chrome & Firefox */
  / * saiz kotak yang diperlukan sekarang bahawa kita mempunyai sempadan bukan sifar */
  Latar Belakang: 
    Linear-Gradient (RGBA (#000, .15), RGBA (#FFF, .2)) Kotak kandungan, 
    Linear-Gradient (RGBA (#FFF, .3), RGBA (#000, .3)) Kotak sempadan, 
    CurrentColor;
  Pointer-events: Auto;
  lebar: var (-d); ketinggian: var (-d);
}

Saya telah menerangkan teknik ini dalam banyak detail dalam artikel yang lebih lama. Pastikan anda menyemaknya jika anda memerlukan penyegaran!

Bit di atas kod akan hampir tidak ada apa -apa, bagaimanapun, jika nilai CurrentColor adalah hitam (#000) yang sekarang. Mari kita selesaikannya dan juga ubah kursor pada ibu jari ke sesuatu yang lebih sesuai:

 input [type = 'range'] {
  / * sama seperti sebelum */
  Warna: #eee;
  Kursor: ambil;
  
  &: aktif {kursor: meraih; }
}

Hasilnya pastinya lebih memuaskan daripada sebelumnya:

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Sesuatu yang benar -benar mengganggu saya adalah sejauh mana teks label adalah slider. Kami boleh membetulkannya dengan memperkenalkan jurang grid pada pembalut:

 .Wrap {
  / * sama seperti sebelum */
  Grid-Gap: .625em;
}

Tetapi masalah terburuk yang masih ada ialah output yang benar -benar diposisikan di sudut kanan atas. Cara terbaik untuk membetulkannya ialah memperkenalkan barisan grid ketiga untuk mereka dan memindahkan mereka dengan ibu jari.

Kedudukan ibu jari dikira dengan cara yang sama dengan perhentian tajam lapisan kecerunan yang kami gunakan untuk topeng mengisi.

Pada mulanya, kami meletakkan pinggir kiri output di sepanjang garis menegak yang radius ibu jari -dari pinggir kiri gelangsar. Untuk menjajarkan pertengahan output dengan garis menegak ini, kami menerjemahkannya kembali (ke kiri, dalam arah negatif x -axis, jadi kami memerlukan tanda tolak) dengan separuh daripada lebarnya (50%, sebagai nilai peratusan dalam translate () fungsi adalah relatif kepada dimensi unsur yang berubah digunakan).

Untuk memindahkan mereka dengan ibu jari, kita tolak nilai minimum (--min) dari nilai semasa ibu jari yang sepadan (--c), membahagikan perbezaan ini dengan perbezaan (---fif) antara nilai maksimum (--max) dan nilai minimum (--min). Ini memberi kita nilai kemajuan dalam selang [0, 1]. Kami kemudian membiak nilai ini dengan lebar berguna (--UW), yang menggambarkan pelbagai gerakan sebenar.

 .Wrap {
  / * sama seperti sebelum */
  grid-template-baris: max-content var (-h) Max-content;
}

output {
  Latar Belakang: CurrentColor;
  Radius sempadan: 5px;
  warna: telus;
  Grid-lajur: 1;
  grid-baris: 3;
  margin-kiri: var (-r);
  Padding: 0 .375em;
  Transform: Terjemahan (Calc ((Var (-C)-var (-min))/var (-DIF)*var (-UW)-50%));
  lebar: Max-Content;
  
  & :: selepas {
    Warna: #FFF;
    Kandungan: kaunter (c);
    Reset Counter: C var (-C);
  }
} 

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Ini kelihatan lebih baik pada pandangan pertama. Walau bagaimanapun, pemeriksaan yang lebih dekat mendedahkan bahawa kita masih mempunyai banyak masalah.

Yang pertama ialah limpahan: Tersembunyi memotong sedikit elemen apabila kita sampai ke hujung trek.

Untuk membetulkannya, kita mesti memahami apa yang betul -betul melimpah: tersembunyi. Ia memotong segala-galanya di luar kotak padding elemen, seperti yang digambarkan oleh demo interaktif di bawah, di mana anda boleh mengklik kod untuk menukar pengisytiharan CSS.

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Ini bermakna penyelesaian cepat untuk isu ini adalah untuk menambah padding lateral yang cukup besar pada pembungkus .wrap.

 Padding: 0 2EM;

Kami menggayakan gelangsar pelbagai thumb kami secara berasingan di sini, tetapi, pada hakikatnya, ia mungkin tidak akan menjadi satu-satunya perkara di halaman, jadi, jika jarak terhad, kami dapat membalikkan padding sisi dengan margin sisi negatif.

Sekiranya unsur-unsur yang berdekatan masih mempunyai kedudukan lalai: statik, hakikat bahawa kita telah meletakkan kedudukan pembungkus harus membuat output berada di atas apa yang mereka bertindih, jika tidak, tweaking z-indeks pada .wrap harus melakukannya.

Masalah yang lebih besar ialah teknik ini yang kami gunakan hasil dalam beberapa tumpang tindih yang sangat pelik apabila menyeret ibu jari.

Meningkatkan indeks Z apabila difokuskan pada yang sepadan serta menyelesaikan masalah tertentu bertindih:

 input [type = 'range'] {
  &: fokus {
    garis besar: pepejal 0 telus;
		
    &, & output {
      Warna: Darkorange;
      Z-indeks: 2;
    }
  }
}

Walau bagaimanapun, ia tidak melakukan apa -apa untuk isu yang mendasari dan ini menjadi jelas apabila kita menukar latar belakang pada badan, terutamanya jika kita mengubahnya menjadi imej, kerana ini tidak membenarkan teks untuk disembunyikan di dalamnya lagi:

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Ini bermakna kita perlu memikirkan semula bagaimana kita menyembunyikan unsur -unsur dalam keadaan normal dan bagaimana kita mendedahkannya dalam keadaan sorotan, seperti: fokus. Kami juga mahu melakukan ini tanpa kembung CSS kami.

Penyelesaiannya adalah menggunakan teknik yang saya nyatakan kira -kira setahun yang lalu dalam artikel "Dry Switching with CSS Variables": Gunakan harta sorotan -HL Custom Property di mana nilai adalah 0 dalam keadaan normal dan 1 dalam keadaan sorotan (: fokus). Kami juga mengira penolakannya (--Nothl).

 * {
  --hl: 0;
  --Nothl: calc (1-var (-hl));
  Margin: 0;
  Font: mewarisi
}

Oleh kerana itu, ini tidak ada apa -apa lagi. Caranya adalah untuk membuat semua sifat yang kita mahu ubah di antara kedua -dua negeri bergantung kepada - -hl dan, jika perlu, penolakannya (kod> -notl).

 $ HLC: #F90;

@mixin thumb () {
  / * sama seperti sebelum */
  latar belakang warna: $ HLC;
}

input [type = 'range'] {
  / * sama seperti sebelum */
  Penapis: Grayscale (var (-nothl));
  z-indeks: calc (1 var (-hl));
  
  &: fokus {
    garis besar: pepejal 0 telus;
    
    &, & output { - -hl: 1; }
  }
}

output {
  / * penempatan grid yang sama */
  margin-kiri: var (-r);
  Max-Width: Max-Content;
  transform: terjemahan (calc ((var (-c)-var (-min))/var (-dif)*var (-uw)));
	
  & :: selepas {
    / * sama seperti sebelum */
    Latar Belakang: 
      Linear-Gradient (RGBA (#FFF, .3), RGBA (#000, .3))
      $ HLC;
    Radius sempadan: 5px;
    paparan: blok;
    Padding: 0 .375em;
    Transform: Terjemahan (-50%) skala (var (-HL));
  }
} 

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Kami hampir di sana! Kami juga boleh menambah peralihan pada perubahan keadaan:

 $ t: .3s;

input [type = 'range'] {
  / * sama seperti sebelum */
  Peralihan: penapis $ t mudah keluar;
}

output :: selepas {
  / * sama seperti sebelum */
  Peralihan: Transformasi $ t mudah keluar;
} 

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Peningkatan akhir adalah untuk kelabu () mengisi jika tiada ibu jari yang difokuskan. Kita boleh melakukan ini dengan menggunakan: fokus-fokus pada pembungkus kita:

 .Wrap {
  & :: selepas {
    / * sama seperti sebelum */
    Penapis: Grayscale (var (-nothl));
    Peralihan: penapis $ t mudah keluar;
  }
	
  &: fokus-fokus {--hl: 1; }
}

Dan itu sahaja!

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Pilihan #2: Penampilan rata

Mari lihat bagaimana kita boleh mendapatkan reka bentuk yang rata. Contohnya:

Langkah pertama adalah untuk mengeluarkan bayang -bayang kotak dan kecerunan yang memberikan demo sebelumnya melihat rupa 3D dan menjadikan latar belakang trek menjadi kecerunan berulang.:

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Perubahan saiz ibu jari pada: Fokus boleh dikawal dengan perubahan skala dengan faktor yang bergantung kepada pembolehubah suis sorotan (--HL).

 @mixin thumb () {
  / * sama seperti sebelum */
  transform: skala (calc (1-.5*var (-nothl)));
  Peralihan: Transformasi $ t mudah keluar;
} 

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Tetapi bagaimana dengan lubang -lubang di trek di sekitar ibu jari?

Teknik komposit topeng sangat berguna di sini. Ini melibatkan kecerunan radial untuk membuat cakera di setiap kedudukan ibu jari dan, selepas kita selesai dengan mereka, terbalik (iaitu komposit dengan lapisan legap sepenuhnya) hasilnya untuk menjadikan cakera tersebut menjadi lubang.

Ini bermakna mengubah kod PUG sedikit supaya kami menjana senarai kecerunan radial yang mencipta cakera yang sepadan dengan setiap ibu jari. Sebaliknya, kami akan membalikkan mereka di CSS:

 //- sama seperti sebelumnya
-biarkan tpos = thumbs.map ((c, i) => `calc (var (-r) (var (-v $ {i})-var (-min))/var (-dif)*var (-uw))`);
- biarkan mengisi = tpos.map (c => `linear-gradient (90deg, merah $ {c}, telus 0)`);
-biarkan lubang = tpos.map (c => `radial-gradient (bulatan pada $ {c}, merah var (-r), telus 0)`)

.Wrap (peranan = 'kumpulan' aria-labelledby = 'multi-lbl' 
  gaya = `$ {thumbs.map ((c, i) =>` --v $ {i}: $ {c.val} `) .join (';')}; 
    --min: $ {min}; --max: $ {max};
    --fill: $ {fill.join (',')}; 
    -Hole: $ {hole.join (',')} `)
  // -Same pembungkus kandungan seperti sebelumnya

Ini menghasilkan markup berikut:

 <div class="'wrap'" role="'kumpulan'" aria-labelledby="'multi-lbl'" gaya="'-v0:" linear-gradient calc merah telus radial-gradient di var pada>
  
</div>

Dalam CSS, kami menetapkan topeng pada kedua-dua unsur-unsur pseudo dan memberikan nilai yang berbeza untuk setiap satu. Kami juga xor lapisan topeng pada mereka.

Dalam kes :: sebelum ini, topeng adalah senarai cakera radial-gradien () dengan lapisan legap sepenuhnya (yang bertindak sebagai penyongsang untuk menjadikan cakera menjadi lubang bulat). Untuk :: Selepas itu, ia adalah senarai lapisan Linear-Gradient ().

 .Wrap {
  / * sama seperti sebelum */
  
  & :: sebelum ini, & :: selepas {
    Kandungan: '';
    / * sama seperti sebelum */
    
    --mask: linear-gradient (merah, merah), var (-lubang);

    / * versi webkit bukan standard */
    -WebKit-Mask: var (-Mask);
    -Webkit-Mask-Composite: xor;

    / * versi standard, disokong dalam Firefox */
    Mask: var (-topeng);
    Composite Mask: Tidak termasuk;
  }
	
  & :: selepas {
    Latar Belakang: #95A;
    --mask: var (-isi);
  }
} 

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Langkah terakhir adalah untuk menyesuaikan trek, ketinggian isi, dan menjajarkannya secara menegak dalam sel grid mereka (bersama dengan ibu jari):

 .Wrap {
  / * sama seperti sebelum */
  
  & :: sebelum ini, & :: selepas {
    / * sama seperti sebelum */
    Align-diri: pusat;
    Ketinggian: 6px;
  }
}

Kami kini mempunyai gelangsar berbilang thumb yang dikehendaki!

Lihat pen oleh thebabydino (@thebabydino) pada codepen.

Atas ialah kandungan terperinci Slider Multi-Thumb: Kes Umum. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!