我遇到了一个关于 jQuery UI 滑块的有趣问题。我需要从 sript 分配它的最小值和最大值，并且正在执行以下操作
$("#sliCSSHt").slider('values',[minh,maxh]);
$("#sliCSSHt").slider('refresh');
当 minh = maxh 时，问题就出现了。MIN 按钮出现在 max 按钮的顶部。然后试图增加最大值的无辜用户发现滑块变得没有响应，因为他/她实际上是在将最小按钮拖动到最大按钮的当前位置之外。如果可以做些什么来解决这个问题呢？
我正在使用 jQuery UI 1.91 和 jQuery 1.82 - 我没有升级到 jQuery 1.9 的选项，因为我使用的插件使用了现在已经从 jQuery 中取出的浏览器对象。
您总是可以阻止滑块重叠。就像是
$( "#sliCSSHt" ).on( "slide", function( event, ui ) {
if(ui.values[0]+10 > ui.values[1])
return false;
} );
更新
此错误已在最新版本中修复jquery-ui
使用最新的 jquery-ui 文件http://code.jquery.com/ui/1.10.3/jquery-ui.js，它可以工作。
这不是永久修复，但有助于使滑块可拖动。
$('#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 并重新定义幻灯片行为。这是我的概念：
如果一个滑块句柄在滑动期间通过了另一个滑块句柄构成的边界：不要阻止用户进一步滑动（正常的 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/
我更喜欢这个解决方案有两个原因：