jQuery jRange melaksanakan pemilihan gelongsor julat berangka effect_jquery khas

Kadangkala kita perlu memilih julat nilai pada halaman, seperti memilih julat harga semasa membeli-belah, memilih CPU, konfigurasi saiz memori, dsb. semasa membeli hos Anda boleh menggunakan bar gelangsar intuitif untuk memilih terus nilai yang dikehendaki tanpa kerja manual Memasukkan nilai berangka adalah mudah dan mudah.

HTML

Mula-mula muatkan fail perpustakaan jQuery dan fail css berkaitan jRange: jquery.range.css dan pemalam: jquery.range.js

Salin kod Kod adalah seperti berikut:

Kemudian letakkan kod berikut di mana anda perlu memaparkan pemilih gelangsar:

Salin kod Kod adalah seperti berikut:

Kami menggunakan medan teks jenis hiiden dan menetapkan nilai lalai, seperti 23.

jQuery

Memanggil pemalam jRange adalah sangat mudah, hanya gunakan kod berikut:

Salin kod

Kod adalah seperti berikut: $('.single-slider').jRange({ Daripada: 0,

kepada: 100,

Langkah: 1,
Skala: [0,25,50,75,100],
format: '%s',
Lebar: 300,
showLabels: benar,
showScale: benar
});

Kemudian jalankan halaman web anda dan anda akan melihat kesannya dalam DEMO.

Tetapan pilihan

Pemalam jRange juga menyediakan beberapa tetapan pilihan yang diperlukan untuk memenuhi pelbagai keperluan.

Pilihan	Penerangan	Nilai lalai
dari	Nilai minimum julat gelongsor, nombor, seperti 0
kepada	Nilai maksimum julat gelongsor, nombor, seperti 100
langkah	Nilai langkah, saiz setiap slaid	1
skala	Skalakan label di bawah peluncur, jenis tatasusunan, seperti [0,50,100]	[dari,kepada]
showLabels	Jenis Boolean, sama ada mahu memaparkan label saiz di bawah peluncur	benar
Skala pertunjukan	Jenis Boolean, sama ada mahu memaparkan label berangka di atas peluncur	benar
format	Format berangka	"%s"
width	滑动条宽度	300
isRange	是否为选取范围。	false

更多信息请参阅jRange项目官网：https://github.com/nitinhayaran/jRange

以上就是本文的全部内容了，有需要的小伙伴参考下，希望大家能够喜欢。