入力[タイプ=範囲]、複数のパラメーター、およびすべてを機能させる方法について

通常、スライダーを使用してブロックを作成する必要がある場合、または範囲を使用してクーラーを作成する必要がある場合は、 jQuery UI set- Slider()から既製のプラグインを使用します。



画像



すべてがPC上で正常に機能し、気にせず、スタイルを変更して機能を楽しんでいます。

プラグインは、プロジェクトがhtml内の何かのモバイルバージョンであるときに挿入されます。値の入力には、フィールドの代わりにスライダーを使用する必要があります。



ここで問題が発生します。 Windows Phone 8では動作しますが、 Android 4.1ではバージョンがなく、 iPhone 4も正常に動作しません。

私が最初に見つけたのはネットワーク上で、これはnoUiSliderであり、どこでもうまく機能しますが、スライダーの最初のスクロールしかなく、その後すべてが遅れ、オナラ、ジャンプします。 私は拒否しなければならなかった、私は遅れの理由を見つけなかった、そしてそれを理解する時間はなかった。

egorkhmelev.github.io/jsliderはすぐに携帯電話での動作を拒否しました。jqxsliderは良いのですが、ブレーキがかかります。



要するに、投稿の本質:これはネイティブスライダーを使用することです。

<input type="range">
      
      





パラメーターを追加します
 multiple
      
      





そして、範囲選択を表示します。

ドキュメントでは、このパラメーターについて何かがちらつきますが、追加しても基本的に何も変わりません。



スタイルとスクリプトを使用した簡単な操作を使用すると、次のような結果が得られます。





初期化



 $('input[name=three]').nativeMultiple({ stylesheet: "slider", onCreate: function() { console.log(this); }, onChange: function(first_value, second_value) { console.log('onchange', [first_value, second_value]); }, onSlide: function(first_value, second_value) { console.log('onslide', [first_value, second_value]); } });
      
      





 <input type="range" min="0" max="180" step="20" value="0,10" />
      
      







プラグインオプション



スタイルシート -スライダーの追加クラス。



アイテムパラメーター



min-最小値

max-最大値

step-スライダーステップ(デフォルトでは1、このパラメーターは省略可能)

value-コンマで区切られたスライダーの開始値と終了値。 コンマがない場合、開始と終了はこの値に等しくなります。 値がない場合、初期値と最終値はそれぞれ最小値と最大値に等しくなります。



イベント



onCreateイベントは、スライダーが初期化されるときに発生します。

onSlideイベントは、スライダーの1つが移動すると発生します。

onChangeイベントは、スライダーの1つが移動したときに発生します。



スライダー上のこれらの素晴らしい白い垂直の2つのストライプは、 Webkitエンジンでのみ機能することを付け加えます。 おそらく、一般的な解決策は、既にストライプが描かれているスライダーに背景を追加することです。



しかし、スライダーのスタイルを変更する方法-インターネットはすでに記事でいっぱいであり、この出版物は直接関連していません。 がんばれ!



このページで例を参照してプラグインをダウンロードできます: lampaa.github.io/nativemultiple



All Articles