javascript - ui-slider の範囲の問題

Question

スライダーで範囲を設定しようとしています。両方のカーソルが同じ値で重ならないようにしたいと思います。言い換えれば、最小値スライダーと最大値スライダーが隣り合ったときに、スライダーをフリーズさせてそのままにしておくにはどうすればよいですか。何か案は？前もって感謝します。

Answer 1

昨日、カスタムスタイルのスライダーを作成したときに、これに対する解決策を探していました。

私が見つけたものから何もうまくいかなかったので、自分で簡単なものを思いつきました：

1.左右のパディングでスライダーをコンテナdivに入れます

<div class="slider-container">
  <div class="slider-main ..."></div>
</div>

2.スタイルを設定する

-container (スライダーハンドル幅の半分までの左右のパディング) スライダー

-ハンドル (左余白から幅の半分まで)

このようなもの（私は記憶から書いています）

<style>
  .slider-container {
    padding-left: 8px;
    padding-right: 8px;
  }
  .slider-handle {
    width: 16px;
    margin-left: -8px;
  }
</style>

また、スライダーメインからスタイリングを削除し、そこからスライダーコンテナーに移動する必要があります

Answer 2

jQuery UI スライダー範囲拡張

似たようなものが必要だったので、既存の jQuery UI スライダー プラグイン/ウィジェットの拡張機能を作成しました。これらは、この拡張機能がサポートする追加オプションです。

• 最小および最大範囲サイズ - 最小範囲サイズはまさにあなたが求めているものです
• 範囲の下限値と上限値を制限する - これにより、範囲の下限ハンドルの最大値と範囲の上限ハンドルの最小値が設定されます。
• 自動範囲スライド - これにより、最大範囲サイズの制限を超えて (任意の) ハンドルをドラッグし、他のハンドルをドラッグすることができます。

コードは私のブログで入手できます(更新されるため、ここでは直接公開しません)。

Answer 3

衝突しようとしているときにスライド関数から false を返すとうまくいくようです: http://jsbin.com/eyoge3/3

jsbin からのコード:

slide: function(event, ui) {
    var oldMin = $("#slider").slider("values", 0);
    var oldMax = $("#slider").slider("values", 1);
    var newMin = ui.values[0];
    var newMax = ui.values[1];

    if( oldMin != newMin && newMin == oldMax )
      return false;
    else if( oldMax != newMax && newMax == oldMin )
      return false;
}