jQuery jRange implementiert eine gleitende Auswahl numerischer Bereichsspezialeffekte_jquery

Manchmal müssen wir einen Wertebereich auf der Seite auswählen, z. B. beim Einkaufen einen Preisbereich auswählen, beim Kauf eines Hosts die CPU, die Speichergrößenkonfiguration usw. auswählen. Sie können den intuitiven Schieberegler verwenden, um den direkt auszuwählen Die Eingabe numerischer Werte ist einfach und bequem.

HTML

Laden Sie zunächst die jQuery-Bibliotheksdatei und die mit jRange verbundenen CSS-Dateien: jquery.range.css und das Plug-in: jquery.range.js

Code kopieren Der Code lautet wie folgt:

Fügen Sie dann den folgenden Code dort ein, wo Sie den Schieberegler-Selektor anzeigen möchten:

Code kopieren Der Code lautet wie folgt:

Wir haben ein Textfeld vom Typ Hiiden verwendet und den Standardwert festgelegt, z. B. 23.

jQuery

Der Aufruf des jRange-Plug-Ins ist sehr einfach, verwenden Sie einfach den folgenden Code:

Code kopieren

Der Code lautet wie folgt: $('.single-slider').jRange({ Von: 0,

bis: 100,

Schritt: 1,
Maßstab: [0,25,50,75,100],
Format: '%s',
Breite: 300,
showLabels: wahr,
showScale: true
});

Dann starten Sie Ihre Webseite und Sie werden den Effekt in der DEMO sehen.

Optionseinstellungen

Das Plug-in jRange bietet auch einige notwendige Optionseinstellungen, um verschiedene Anforderungen zu erfüllen.

Optionen	Beschreibung	Standardwert
von	Der Mindestwert des Gleitbereichs, eine Zahl, z. B. 0
zu	Der Maximalwert des Gleitbereichs, eine Zahl, z. B. 100
Schritt	Schrittwert, Größe jeder Folie	1
Skala	Skalenbeschriftung unter dem Schieberegler, Array-Typ, z. B. [0,50,100]	[von,bis]
showLabels	Boolescher Typ, ob die Größenbeschriftung unter dem Schieberegler angezeigt werden soll	wahr
showScale	Boolescher Typ, ob die numerische Beschriftung über dem Schieberegler angezeigt werden soll	wahr
Formatieren	Numerisches Format	"%s"
largeur	Largeur de la barre de curseur	300
isRange	Que ce soit la plage de sélection.	faux

Pour plus d'informations, veuillez vous référer au site officiel du projet jRange : https://github.com/nitinhayaran/jRange

Ce qui précède est l'intégralité du contenu de cet article. Les amis qui en ont besoin peuvent s'y référer.