jQuery jRange implémente une plage numérique de sélection coulissante effets spéciaux_jquery

Parfois, nous devons sélectionner une plage de valeurs sur la page, comme la sélection d'une plage de prix lors de l'achat, la sélection du processeur, la configuration de la taille de la mémoire, etc. lors de l'achat d'un hôte. Vous pouvez utiliser la barre coulissante intuitive pour sélectionner directement le. valeur souhaitée sans travail manuel. La saisie de valeurs numériques est simple et pratique.

HTML

Chargez d'abord le fichier de la bibliothèque jQuery et les fichiers CSS liés à jRange : jquery.range.css et le plug-in : jquery.range.js

Copier le code Le code est le suivant :

Mettez ensuite le code suivant à l'endroit où vous devez afficher le sélecteur de curseur :

Copier le code Le code est le suivant :

Nous avons utilisé un champ de texte de type hiiden et défini la valeur par défaut, telle que 23.

jQuery

Appeler le plug-in jRange est très simple, il suffit d'utiliser le code suivant :

Copier le code

Le code est le suivant : $('.single-slider').jRange({ De : 0,

à : 100,

Étape : 1,
Échelle : [0,25,50,75,100],
format : '%s',
Largeur : 300,
showLabels : vrai,
showScale : vrai
});

Ensuite, lancez votre page Web et vous verrez l'effet dans la DÉMO.

Paramètres des options

Le plug-in jRange fournit également certains paramètres d'options nécessaires pour répondre à divers besoins.

Options	Description	Valeur par défaut
de	La valeur minimale de la plage mobile, un nombre, tel que 0
à	La valeur maximale de la plage mobile, un nombre tel que 100
étape	Valeur du pas, taille de chaque diapositive	1
échelle	Étiquette d'échelle sous le curseur, type de tableau, tel que [0,50,100]	[de,à]
showLabels	Type booléen, s'il faut afficher l'étiquette de taille sous le curseur	vrai
showScale	Type booléen, s'il faut afficher l'étiquette numérique au-dessus du curseur	vrai
format	Format numérique	"%s"
width	滑動條寬度	300
isRange	是否為選取範圍。	false

更多資訊請參閱jRange專案官網：https://github.com/nitinhayaran/jRange

以上就是本文的全部內容了，有需要的小夥伴參考下，希望大家能夠喜歡。