jQuery jRange はスライド選択の数値範囲を実装します。

ショッピング時の価格帯の選択、ホストの購入時の CPU やメモリ サイズ構成の選択など、ページ上で値の範囲を選択する必要がある場合があります。直感的なスライダー バーを使用して直接選択できます。手動で数値を入力する必要がなく、簡単で便利です。

HTML

まず、jQuery ライブラリ ファイルと jRange 関連の CSS ファイル: jquery.range.css およびプラグイン: jquery.range.js をロードします

コードをコピーします コードは次のとおりです:

<スクリプト src="jquery.js">
<リンク rel="スタイルシート" href="jquery.range.css"> <スクリプト src="jquery.range.js">

次に、スライダー セレクターを表示する必要がある場所に次のコードを追加します。

コードをコピーします コードは次のとおりです:

hiiden タイプのテキストフィールドを使用し、デフォルト値 (23 など) を設定しました。

jQuery

jRange プラグインの呼び出しは非常に簡単で、次のコードを使用するだけです:

コードをコピーします コードは次のとおりです:

$('.single-slider').jRange({

から: 0、
へ: 100、
ステップ: 1、
スケール: [0,25,50,75,100]、
形式: '%s'、
幅: 300、
showLabels: true、
showScale: true
});

次に、Web ページを実行すると、デモで効果が表示されます。

オプション設定

プラグイン jRange は、さまざまなニーズを満たすために必要なオプション設定も提供します。

オプション	説明	デフォルト値
から	スライド範囲の最小値、0 などの数値
へ	スライド範囲の最大値、100 などの数値
ステップ	ステップ値、各スライドのサイズ	1
スケール	スライダーの下のスケール ラベル、[0,50,100] などの配列タイプ	[出発地、到着地]
ラベルを表示	ブール型、スライダーの下にサイズラベルを表示するかどうか	本当
showScale	ブール型、スライダーの上に数値ラベルを表示するかどうか	本当
フォーマット	数値形式	"%s"
width	Slider bar width	300
isRange	Whether it is the selection range.	false

For more information, please refer to the jRange project official website: https://github.com/nitinhayaran/jRange

The above is the entire content of this article. Friends who need it can refer to it. I hope you will like it.