問題タブ [nouislider]

これまでの開発の大部分で jQuery を使用してきましたが、NoUiSlider を更新するためにバニラ Javascript を使用して障害にぶつかっています。

基本的に、次のコードで複数のスライダーを作成しています。

そして、これはすべて問題なくダンディであり、 を使用して変化するイベントを聞くことになっていることに気づきましたが、対応する値を設定するDRYupdateメソッドに非常に慣れていません...次があるとしましょうHTML:input

変更されたスライダーの次のスライダーを更新するイベント リスナーを追加するにはどうすればよいinputですか?

私は次の行に沿って何かをすると思います：

しかし、一連の ID などを使用せずに繰り返しリスナーを使用する方法がわかりません。どんな助けでも大歓迎です。

ここでプレイ: http://jsfiddle.net/z83oz9np/9/

更新/解決策

スライダーの作成中に呼び出されるバインド関数を次のように記述しました。

私は3つのnoUISlidersを使用しています。3 つのスライダーの出力を結合して、html 出力を作成したいと考えています。具体的には、この組み合わせを使用して、1 番目のスライダーからの出力、3 は 2 番目のスライダー、5 は 3 番目のスライダーからの画像ファイル (つまり、img135.jpg) を選択します。27 個の画像があります。3 つのスライダー (111.jpg、211.jpg、311.jpg などから 555.jpg まで) の結合出力に基づいて 1 つを選択できるようにしたいと考えています。

出力を提供する 3 つのスライダーがあります。

スライダーはすべて入っており、値を出力しています。次のステップに進む方法についてアドバイスが必要です。私は jscript を初めて使用するので、ご提供いただけるヘルプやアドバイスをいただければ幸いです。

ケン

NoUiSlider 7 (jQuery バージョン) を使用しており、ユーザーが最小値を下回る値を入力した場合にコールバック関数が必要です。

だから私は値をスライスしようとしました（私は2文字の接尾辞を使用しているため）、値が下にある場合は警告します：

しかし、これはうまくいきません。変更はスライダーが変更された場合にのみ機能し、入力フィールドによる変更では機能しません

NoUiSlider (Refreshless.com から) を Angular2 コンポーネントにラップしようとしています (これ自体が良いアイデアかどうかはわかりません。これについてもアドバイスを求めてください)。これまでのところ、スライダー インスタンスを作成し、関数を介してそのイベントを管理することができました。ただし、関数はコンポーネントの外部にあるため、作成しようとしているコンポーネントの出力プロパティとしてそのようなイベントをエクスポートできません。なにか提案を？前もって感謝します。ここにコードがあります

（Typescriptで）さらに掘り下げた後、解決策、つまりアロー関数式の使用を見つけたようです。ここに新しいコード

00:00:10 から 01:30:00 までの範囲のビデオの長さのスライダーが必要です。ミリ秒単位で期間を取得し、ミリ秒単位で送信する必要があります。noUiSlider.create2 つの書式設定関数とupdateイベント ハンドラーを使用して を呼び出しています。

問題は、msToHHMMSS関数が の値で 3 回呼び出され10000、次に 5400000でもう一度呼び出されてから、 の値で呼び出され、エラーをスローすることです: 。10000HHMMSSTomsundefinedCannot read property 'split' of undefined

この質問を見てきましたが、最初に言ったように、hh:mm:ssフォーマットが必要です。