Question

我遇到了jQuery UI滑块的一个有趣问题。我需要从sript分配其最小值和最大值，并且正在执行以下操作

$("#sliCSSHt").slider('values',[minh,maxh]);
$("#sliCSSHt").slider('refresh');

当minh = maxh时出现问题。 MIN按钮似乎位于最大按钮的TOP上。然后尝试增加最大值的无辜用户发现滑块没有响应，因为他/她实际上是将min按钮拖动到max按钮的当前位置之外。怎么可以做到这一点呢？

我正在使用jQuery UI 1.91和jQuery 1.82 - 我没有选择升级到jQuery 1.9，因为我使用的是使用浏览器对象的插件，现在已经从jQuery中删除了。

Answer 1

您可以随时停止滑块重叠。像

这样的东西

$( "#sliCSSHt" ).on( "slide", function( event, ui ) {
    if(ui.values[0]+10 > ui.values[1])  
       return false;
} );

http://jsfiddle.net/c934g/5/

<强>更新此错误已在最新的jquery-ui

中修复

使用最新的jquery-ui文件http://code.jquery.com/ui/1.10.3/jquery-ui.js。

http://jsfiddle.net/c934g/7/

Answer 2

我的解决方案是修补jQuery UI并重新定义幻灯片行为。这是我的概念：

如果一个滑块手柄在滑动过程中通过另一个滑块手柄组成的边界：而不是阻止用户进一步滑动（正常的jQuery UI行为），就像用户抓住另一个一样。简单地说：如果需要，交换滑块手柄。

这是我的补丁。它没有太大变化，大多数行与原始的jQuery UI代码相同。

$.widget('ui.slider', $.ui.slider, {

    _start: function( event, index ) {
        this.swapIndex = false;
        return this._super( event, index );
    },

    _slide: function( event, index, newVal ) {
        var otherVal,
            newValues,
            allowed;

        if ( this.options.values && this.options.values.length ) {
            if ( this.swapIndex ) {
                index = index ? 0 : 1;
            }
            otherVal = this.values( index ? 0 : 1 );

            if ( index === 0 && newVal > otherVal || index === 1 && newVal < otherVal ) {
                this.swapIndex = !this.swapIndex;
                index = index ? 0 : 1;
            }

            if ( newVal !== this.values( index ) ) {
                newValues = [];
                newValues[ index ] = newVal;
                newValues[ index ? 0 : 1 ] = otherVal;
                // 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
                } );
                if ( allowed !== false ) {
                    this.values( index, newVal );
                }
            }
        } 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 );
                }
            }
        }
    }
});

现场演示：http://jsfiddle.net/xykwup5a/

我更喜欢这个解决方案有两个原因：

如果您的值为负数
更好的用户体验：当不使用补丁和两个手柄重叠时，用户只能在一个方向上移动手柄，并且必须四处移动以增加另一个方向的范围。

Answer 3

这不是永久修复，但有助于使滑块可拖动。\ / p>

$('#slider-range').slider
  start: (event, ui) ->
    # Only when sliders are overriding
    if ui.values[0] == ui.values[1]
     set_min = ui.values[0] - 0.1
     set_max = ui.values[1]
     # Deducing value of left slider by 0.1(or you can give step value based on your condition)
     $('#slider-range').slider('values', [set_min,set_max])
     return false
  slide: (event, ui) ->
    # Some statements
  stop: (event, ui) ->
    # Some statements

jQuery UI Range滑块错误？

3 个答案: