jquery - ドラッグによるjQuery UIスライダーの移動範囲

Question

jQuery UI Slider を範囲モードで使用しています。スライダーの外側に追加のボタンを追加せずに、ユーザーが範囲を移動できるようにする方法 (プラグイン/拡張機能/ハック) はありますか (つまり、下限と上限の両方を変更します)。一部の GUI ウィジェットでは、これは中央 (2 つのハンドラーの間) からドラッグすることによって実現されます。

前もって感謝します。

Answer 1

さて、ティモシーさんの回答は、実際に投稿された質問に対する回答ではないようです。

また、ハーマンが説明したのと同様のものを探していましたが、jQueryフォーラムでの1つの機能リクエストを除いてhttps://forum.jquery.com/topic/draggable-range-in-slider同じ問題を対象とするブログエントリを見つけましたhttp:// erraticdev.blogspot.com/2011/08/advanced-jquery-ui-range-slider.html

そのブログ投稿のスライダー拡張機能を使用すると、スライダー ハンドルをロックして、定義された最大範囲を超えないようにすることができます。ハンドル間の「スペース」をドラッグするのではなく、ハンドルを使用して範囲全体を移動できます。

最後に、私の問題は解決しませんでしたが、解決策に非常に近いです。

Answer 2

制限変数を再設定するために 2 つのテキスト ボックスを使用している場合は、変更を検出する変更イベント関数を実行する必要があります。

$('#rangeMod input:text').change(function() {

  // set range vars based on new input (you should also validate for (INT)).
  var txtbox1 = '...'; // based on first text box
  var txtbox2 = '...'; // based on second text box

  var range = [txtbox1, txtbox2];

  $('#my-slider')
     .slider("destroy") /* Destroy it Before Rebind/Re-Init */
     .slider({range:true, min: range[0], max: range[1], ... });
});