javascript - 互いに「プッシュ」する2つのハンドルを持つjquery uiスライダーを作成するにはどうすればよいですか?

Question

jquery ui を使用して、ハンドル間の最小スペースを維持する 2 つのハンドルを持つスライダーを作成したいと考えています。左のハンドルが右のハンドルを横切ろうとする場合は、右のハンドルを押し込む必要があります。およびその逆。以下に例を示します (オーバーラップは気にしないでください。重要ではありません)。

http://jsfiddle.net/SP5VQ/

動きが遅い限り機能しますが、マウスの動きが速すぎると、「押す」シナリオで失敗します。「スライダー」イベント内からスライダーの値を設定すると、問題が発生する可能性があると思います。

Answer 1

これはうまくいきました。コードをコピーして$.ui.slider.prototype._slide、左のハンドルが右のハンドルよりも大きいかどうかを確認する部分を削除しました。今はうまくいきます。

http://jsfiddle.net/Nk8ap/

        $.ui.slider.prototype._slide = function ( event, index, newVal ) {
          var otherVal,
            newValues,
            allowed;

          if ( this.options.values && this.options.values.length ) {
            otherVal = this.values( index ? 0 : 1 );
            if ( newVal !== this.values( index ) ) {
              newValues = this.values();
              newValues[ index ] = newVal;
              // A slide can be canceled by returning false from the slide callback
              allowed = this._trigger( "slide", event, {
                handle: this.handles[ index ],
                value: newVal,
                values: newValues
              } );
              otherVal = this.values( index ? 0 : 1 );
              if ( allowed !== false ) {
                this.values( index, newVal, true );
              }
            }
          } else {
            if ( newVal !== this.value() ) {
              // A slide can be canceled by returning false from the slide callback
              allowed = this._trigger( "slide", event, {
                handle: this.handles[ index ],
                value: newVal
              } );
              if ( allowed !== false ) {
                this.value( newVal );
              }
            }
          }
        }