問題タブ [nouislider]

どちらのウィジェットのドキュメントにも構成オプションが見つかりませんでしたが、noUiSliderまたはjQuery UI Sliderを実装して、この機能をローカライズされた方法で提供する方法はありますか (ローカライズ = DOM の他のセクションで必要なデフォルト機能を許可します)。 :

• 値を設定するには、ハンドルをクリックしてドラッグする必要があります
• ユーザーがバーをクリックして値を設定できない -> ユーザーがクリックした場所に値が設定されていない

これはビジネス要件のためであり、バニラ JS でスライダーをゼロから書き直す方法を学ぶことは気にしませんが、十分にサポートされているウィジェットを使用することは非常に良いことです。前もって感謝します。

Angular アプリで noUislider を使用しています。スライダーの値は入力テキストにバインドされ、その逆も同様です。したがって、ユーザーには、値を入力してそれに応じてスライダーを調整するか、ユーザーがスライダーをスライドさせるかのいずれかを選択できます。

私が直面している問題は、スライダーの範囲が 0 ～ 24 であり、要件に従って、ユーザーが値 > 24 (スライダーの最大値) を入力できることです。スライダーは最大値に移動しますが、ユーザーが入力テキストに入力した値 (つまり 26) を保持することが期待されます。

それが可能かどうかさえわかりません。この点でどんな助けでも大歓迎です。

私のウェブサイトで NoUiSlider JS プラグインを使用しました。これにより、ユーザーはスライダーを使用して予算を選択できるようになりました。これは素晴らしいことですが、選択した値を連絡先/見積もりフォームの一部として含めたいと考えています。

NoUiSlider パーツから値を置き換える必要があると思われる非表示フィールドをフォームに追加しました。

これが私のコードです、何かアイデアはありますか?

よろしくリアム

document.querySelectorAll( '.js-slider' ); で定義された複数のスライダーがあります。tooltips.format で、データ ラベルを介して現在のスライド オブジェクトで定義されている値の上にラベルを挿入したいと思います。

初期化では、これは正常に機能します。

しかし、更新時に、最後に初期化されたスライダー ラベルを取得します。これは明らかです :) しかし、現在のスライダー オブジェクトまたは ID を tooltips.format 内または update イベント内で取得したり、現在のスライダーの設定オブジェクトを取得したりできますか?

これを理解することはできませんでした。

問題の実行中の Fiddel はここで見ることができます: Fiddle

noUISlider を使用して複数のスライダーをロードしようとしていますが、機能していません。最初のスライダーを使用すると、2 番目と 3 番目の値が変わります。1 つのスライダーのコードをリファクタリングして、さまざまなオプションを持つ追加のスライダーを簡単に追加するにはどうすればよいですか?

ここにフィドルがあり、以下が私のコードです。

定数ベースで inputFormat の値を取得する際に問題が発生しています。Web ページ/アプリケーションを実行すると、$scope.width 変数が inputFormat の最初の値を取得してから停止します。inputFormat の値が変更された後、値を取得し続けません。私の質問は、$scope.width 変数が更新されるように、inputFormat 変数をどのように呼び出すかということです。私はangularとjavascriptが初めてなので、私の質問を理解していただければ幸いです。助けてくれてありがとう！

$scope.width を呼び出す html の部分は次のとおりです。

ノックアウトと noUiSlider をカスタム バインディングと融合させようとしています。jQuery-UI スライダーと Knockout の同様のコードを見つけ、それを基礎として使用しました。

以下のsliderkoカスタムバインディングを使用すると、noUislidersはオブザーバブルを更新しません。NaN が表示され、入力フィールドには何も表示されません。

以下のスライダー カスタム バインディングを noUiSlider イベントで直接使用すると、すべてが機能します。おそらく noUiSlider 更新イベントの追跡が原因で、スライダーのカスタム バインディングがうまく機能しません。ただし、それがスライダーで入力フィールドを継続的に更新する方法を理解できる唯一の方法です。

Knockout の registerEventHandler を使用したいのですが、それを機能させる方法がわかりません。