問題タブ [nouislider]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - NoUiSlider をリセットするには?
javascriptを使用して特定のフォームのすべてのスライダーをリセットするにはどうすればよいですか? (jqueryも可) http://refreshless.com/nouislider/
javascript - noUiSlider: 複数作成
数十のスライダーを持つフォームでnoUiSlider ( http://refreshless.com/nouislider/ ) を使用しています。それぞれのコードをコピーして貼り付けるのではなく、クラス名の配列とループを設定するだけでよいと考えました。それはうまくいきます。つまり、動作するスライダーをセットアップします。ただし、フォームは更新時にスライダーの値も表示する必要があり、それは私が解決できない部分です。私は静的な値でそれを行う方法を知っていますが、ループではありません...
簡単な例:
JavaScript:
HTML:
問題の行は上で強調表示されています...静的な値(例、「slider2-value」)を使用すると正常に動作しますが、更新イベントがトリガーされたときに適切なIDをターゲットにする方法がわかりません... Slider_names[i] は明らかにそこでは機能しません。私はおそらく明らかな何かを見逃していますか?ありがとう!
nouislider - niUiSlider リンクして、2 つのスライダーのパーセント合計を 100 にします
2 つの noUiSlider があり、どちらも 100% に等しい必要があります。したがって、slider1 が 30% から 40% に移動すると、slider2 は自動的に 70% から 60% に移動し、その逆も同様です。
noUiSlider のドキュメントには、2 つのスライダーをリンクして相互に依存して移動するためのcrossUpdate
コード例HEREがあります。ただし、この例では、スライダーが同じ方向に移動することを示しています。このコードは今までに見たことがないものなので、数字を動かしてみましたが、スライダーを逆に動かすことはできません。
ここに私のフィドルがあります:http://jsfiddle.net/LukeMcLachlan/0ny6q375/2/
ソリューションが置かれている場所である crossUpdate 関数は次のとおりです。
誰かがこれを解決するのを手伝ってくれるなら、私はとても感謝しています。ありがとう。
javascript - Nouislider での ajax 呼び出しの問題
同じページに複数のスライダーがあり、次のように初期化します。
問題は、他のたくさんの新しいスライダーを持つモーダル ウィンドウの ajax 呼び出しがあることです...
モーダルを呼び出すと常にスライダーが表示されず、ajax 呼び出しのコールバック イベントでスライダーを初期化しようとしましたが、スライダーが既に初期化されているというエラーが発生しました。それらを破壊する必要がありますが、この種の状況をどのように処理できますか? PS:モーダルに同じコードをコピーして貼り付けるというアイデアは本当に好きではありませんでした...誰かがより良い解決策を持っているなら、私はそれを感謝します.
みんな、ありがとう
javascript - ハンドルの方向を変更した後の noUiSlider 値が未定義
スライダーを作成しorientation:'vertical'
、「スパン」を変更してリンクし、スライダーをドラッグ/タップするときに値を更新および設定できるようにします。それはうまく機能しますが、ハンドルを下部に配置するとすぐに、direction: 'rtl'
出力がスパンされますundefined
。
スライダーは水平ですが、NoUiSliderサイトで同じ問題を見ましたが、問題はまだあります。
デフォルトではdirection
、スライダーのハンドルは"ltr"
「左から右」に設定されています。スライダーの向きがvertical
ハンドルに設定されている場合は、同じように動作し、「ltr = 上から下」または「rtl = 下から上」のいずれかを調整します。
理由はわかりませんが、外部リソース リンクがスライダーをレンダリングしないようです。すみませんが、私は初心者で、構文が間違っているだけかもしれません (ただし、ローカルで動作します)。
javascript - NoUISlider ツールチップは整数のみを表示します
スライダーのツールチップに、「130.00」ではなく「130」などの整数のみを表示するようにしたいと考えています。どこから始めればよいかわかりません。
これが私のコードです:
私の JS コード: http://jsfiddle.net/miiauwz/66a5ahm0/