Gelembung Nilai untuk Input Julat

Input pelbagai dalam HTML adalah seperti ini:

 <input type="julat" name="kuantiti" min="1" max="10">

Dalam pelayar yang menyokong mereka, mereka kelihatan seperti ini:

Sekarang itu hebat dan semua. Anda boleh menggunakannya untuk apa -apa di mana anda ingin mengumpul nombor dari pengguna yang mempunyai nilai minimum dan maksimum yang dikuatkuasakan.

Tetapi perhatikan apa -apa pelik? Segala -galanya, input pelbagai itu tidak berkomunikasi dengan pengguna berapa nombor yang sebenarnya akan dikemukakan. Sekarang jika input anda adalah seperti "Bagaimana perasaan anda? Tinggal untuk sedih, betul -betul gembira." - Kemudian, anda mungkin tidak perlu menunjukkan nombor pengguna. Tetapi saya akan bertaruh lebih biasa bahawa anda perlu menunjukkan nombor daripada tidak menunjukkannya.

Untuk bersikap adil, spec berkata:

Elemen input mewakili kawalan untuk menetapkan nilai elemen ke rentetan yang mewakili nombor, tetapi dengan kaveat bahawa nilai yang tepat tidak penting , membiarkan UAS menyediakan antara muka yang lebih mudah daripada yang mereka lakukan untuk keadaan bilangan.

Tetapi c'mon, hanya kerana kita mahu slider sejuk tidak secara automatik bermakna kita harus menghalang pengguna daripada mengetahui nilai yang dikemukakan. Saya tidak semestinya mengatakan pelayar harus mengubah kawalan UI mereka untuk menunjukkan nombor itu. Saya katakan kita harus membina diri kita sendiri!

Ini adalah kes penggunaan yang sempurna untuk tag , yang khusus untuk nilai yang dikira oleh elemen bentuk. Berikut adalah pelaksanaan super mudah bagaimana anda boleh menggunakannya:

 <input type="julat" name="foo">
<output untuk="foo" onforminput="value = foo.ValueAsNumber;"> </output>

Kemas kini! Versi baru dengan vanila JavaScript yang juga berfungsi dengan lebih baik.

Matlamat kami di sini adalah untuk memaparkan "gelembung" yang menunjukkan nilai semasa input pelbagai.

Menetapkan nilai "gelembung" kami dari nilai input adalah masalah menarik nilai julat dan memilihnya dalam gelembung:

 range.adDeventListener ("input", () => {
  bubble.innerHtml = rangel.value;
});

Caranya meletakkan gelembung di sepanjang input jarak supaya ia meluncur bersama "ibu jari". Untuk melakukan itu, kita perlu mengira apa % gelembung perlu diserang ke kiri. Oleh itu, mari kita lakukan untuk melakukan perkara itu untuk memastikan perkara menjadi pembersih smidge:

 range.adDeventListener ("input", () => {
  setBubble (julat, gelembung);
});

fungsi setBubble (julat, gelembung) {
  const val = range.value;
  const min = range.min? range.min: 0;
  const max = range.max? range.max: 100;
  const newVal = nombor (((val - min) * 100) / (max - min));
  bubble.innerHtml = val;

  // nombor sihir sorta berdasarkan saiz ibu jari ui asli
  bubble.style.left = newVal = "%";
}

Di sini kami memastikan kami menyumbang kepada input julat Min dan Max Atribut dan mengira kedudukan % antara 0-100 berdasarkan nilai semasa dalam julat itu. Tidak semua julat adalah nombor 0-100 lalai, jadi katakan julat adalah pada nilai 50 dalam julat 0 hingga 200, iaitu 25% dari jalan. Ini menyumbang itu.

Tetapi ia mempunyai satu kecacatan yang menjengkelkan: gelembung terlalu jauh ke kiri pada permulaan dan terlalu jauh ke kanan pada akhirnya. Pada input jarak, ibu jari tidak menggantung tepi kiri sehingga pusatnya pada permulaan, dan sama pada akhir. Seperti bar scroll, tepi berhenti ibu jari di dalam trek.

Kita boleh menggunakan beberapa nombor sihir di sana yang seolah -olah berfungsi dengan baik di seluruh pelayar:

 // nombor sihir sorta berdasarkan saiz ibu jari ui asli
  bubble.style.left = `calc ($ {newVal}% ($ {8 - newVal * 0.15} px))`;

Inilah demo terakhir:

Saya terinspirasi untuk mencucuknya dengan ini kerana pembaca Maxgloba menulis dengan versi mereka yang saya akan hantar di sini:

Aspek yang sejuk dari versi Max ialah input julat adalah gaya CSS, jadi saiz tepat ibu jari diketahui. Terdapat beberapa nombor yang merasakan sihir dalam matematik JavaScript, tetapi sekurang -kurangnya mereka didasarkan pada nombor sebenar yang ditetapkan dalam CSS mengenai saiz ibu jari.

Versi lain

Dave Olsen memindahkan idea (asal) untuk tidak mempunyai kebergantungan pada jQuery. Inilah versi itu:

Sean Stopnik:

simurai:

Vincent Durand:

Jangan lupa input jarak jauh boleh mempunyai datalis yang meletakkan sedikit takik pada mereka yang agak sejuk.

Ana Tudor mempunyai koleksi besar, yang kebanyakannya menunjukkan nilai semasa melalui reka bentuk mereka.

? Versi lama dari versi asal siaran ini (jQuery, ditambah juga tidak berfungsi)

Hanya meninggalkan ini di sini untuk sebab -sebab sejarah.

Mari tarik jQuery rakan kami dan dapatkan CSS kami. Matlamat ini adalah di bawah. Mana -mana input julat, bila -bila masa, mana -mana min/max/langkah - kami meletakkan gelembung di atasnya menunjukkan nilai semasa.

Mari gaya elemen output terlebih dahulu. Kami akan meletakkannya di atas input. Itu memberi kita keupayaan untuk menyesuaikan nilai kiri juga, apabila kita memikirkan dengan JavaScript apa yang sepatutnya. Kami akan suka dengan kecerunan dan radius sempadan, dan juga menambah segitiga penunjuk kecil dengan elemen pseudo.

 output { 
  Kedudukan: Mutlak;
  Latar Belakang-imej: Linear-Gradient (atas, #444444, #999999);
  lebar: 40px; 
  Ketinggian: 30px; 
  Teks-Align: Pusat; 
  Warna: Putih; 
  Radius sempadan: 10px; 
  paparan: blok sebaris; 
  Font: Bold 15px/30px Georgia;
  Bawah: 175%;
  Kiri: 0;
  margin -kiri: -1%;
}
output: selepas { 
  Kandungan: "";
  Kedudukan: Mutlak;
  lebar: 0;
  ketinggian: 0;
  Border-Top: 10Px Solid #999999;
  Sempadan-kiri: 5px Telus pepejal;
  Sempadan-kanan: 5px Telus pepejal;
  Atas: 100%;
  Kiri: 50%;
  margin -kiri: -5px;
  margin -top: -1px;
}

Sekarang apa yang perlu kita lakukan ialah menonton semua input pelbagai untuk perubahan nilai mereka. Matlamat kami adalah untuk mengalihkan kedudukan kiri gelembung dengan laju dengan gelangsar. Itu bukan perkara paling mudah di dunia, kerana slider boleh menjadi lebar dan sebarang nilai minimum atau maksimum. Kita perlu melakukan sedikit matematik. Inilah semua jQuery Javascript, mengulas:

 // Dom Ready
$ (fungsi () {
 var el, Newpoint, Newplace, offset;
 
 // Pilih semua input jarak, tonton perubahan
 $ ("input [type = 'range']"). perubahan (fungsi () {
 
   // cache ini untuk kecekapan
   EL = $ (ini);
   
   // mengukur lebar input jarak jauh
   lebar = el.width ();
   
   // Perhatikan peratusan penempatan antara kiri dan kanan input
   newPoint = (el.val () - el.attr ("min")) / (el.attr ("max") - el.attr ("min"));
   
   // nilai janky untuk mendapatkan penunjuk untuk bersaing dengan lebih baik
   offset = -1.3;
   
   // Mencegah gelembung dari melampaui kiri atau kanan (penyemak imbas yang tidak disokong)
   jika (newpoint  1) {newPlace = width; }
   lain {newplace = width * Newpoint offset; Offset -= Newpoint; }
   
   // bergerak gelembung
   el
     .next ("output")
     .css ({
       Kiri: Newplace,
       MarginLeft: Offset "%"
     })
     .text (el.val ());
 })
 // palsu Perubahan ke gelembung kedudukan pada beban halaman
 .trigger ('perubahan');
});

Satu bahagian kasar di dalamnya ialah nilai 1.3. Saya cuba menyusun hujung segitiga gelembung dengan pusat gelangsar. Ia tidak mudah, kerana pusat gelangsar tidak pernah 100% kiri atau kanan. Nilai itu tidak sempurna, atau dilaksanakan dengan sempurna, tetapi lebih baik daripada tidak memilikinya.

Sebagai bonus, penyemak imbas yang tidak menyokong input pelbagai masih mendapat tindakan gelembung.

Kod di atas bergantung kepada input jarak yang mempunyai nilai min dan maksimum yang ditentukan. Jika mereka tidak agak pecah. Saya fikir ia akan menjadi pelik untuk menggunakan input pelbagai tanpa menentukan perkara -perkara ini, walaupun jika anda tidak kelihatannya mereka lalai kepada 0 dan 100. Untuk peluru ini, anda akan merebut setiap atribut, mengujinya, dan jika ia tidak kelihatan betul memperbaikinya. Sesuatu seperti:

 var minvalue, maxValue;
jika (! el.attr ("min")) {minValue = 0; } else {minValue = el.attr ("min"); }

... kemudian gunakan pemboleh ubah minvalue dalam matematik. Dan lakukan serupa untuk Max. Bagaimanapun, inilah demo langsung:

Atas ialah kandungan terperinci Gelembung Nilai untuk Input Julat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!