我如何制作一个带有两个句柄的jquery ui滑块;“推”;彼此

How can I make a jquery ui slider with two handles that "push" eachother?

本文关键字：滑块 ui jquery 彼此 何制作 一个 两个 句柄      更新时间：2023-12-24

我想使用jquery ui制作一个带有两个句柄的滑块，以便在它们之间保持最小的空间。如果左手柄试图越过右手柄，则应推动右手柄。反之亦然。这里有一个例子（不要介意重叠，这并不重要）：

http://jsfiddle.net/SP5VQ/

只要移动缓慢，它就会工作，但如果鼠标移动过快，在"推"的情况下就会失败。我认为在"滑块"事件中设置滑块值可能有错误。

这很有效。我从$.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 );
              }
            }
          }
        }
相关文章：