拖动UI输入范围滑块的范围
0 10 90 100 我需要一个带有两个手柄的输入范围滑块来选择一个范围，以及拖动范围的能力 （上图中的等号）。 因此，在上面的示例中，start = 10和end = 90，并通过移动两个句柄之间的整行来向左拖动：
0 80 100
现在Start为0，End为80，无需拖动句柄即可完成。
什么库提供此function？
谢谢。
概观
rangeDragfunction的jQuery UI Slider小部件扩展。 此function允许用户一次拖动整个范围，而不必拖动手柄来移动范围。
码
https://gist.github.com/3758297
(function( $, undefined ) { $.widget("ui.dragslider", $.ui.slider, { options: $.extend({},$.ui.slider.prototype.options,{rangeDrag:false}), _create: function() { $.ui.slider.prototype._create.apply(this,arguments); this._rangeCapture = false; }, _mouseCapture: function( event ) { var o = this.options; if ( o.disabled ) return false; if(event.target == this.range.get(0) && o.rangeDrag == true && o.range == true) { this._rangeCapture = true; this._rangeStart = null; } else { this._rangeCapture = false; } $.ui.slider.prototype._mouseCapture.apply(this,arguments); if(this._rangeCapture == true) { this.handles.removeClass("ui-state-active").blur(); } return true; }, _mouseStop: function( event ) { this._rangeStart = null; return $.ui.slider.prototype._mouseStop.apply(this,arguments); }, _slide: function( event, index, newVal ) { if(!this._rangeCapture) { return $.ui.slider.prototype._slide.apply(this,arguments); } if(this._rangeStart == null) { this._rangeStart = newVal; } var oldValLeft = this.options.values[0], oldValRight = this.options.values[1], slideDist = newVal - this._rangeStart, newValueLeft = oldValLeft + slideDist, newValueRight = oldValRight + slideDist, allowed; if ( this.options.values && this.options.values.length ) { if(newValueRight > this._valueMax() && slideDist > 0) { slideDist -= (newValueRight-this._valueMax()); newValueLeft = oldValLeft + slideDist; newValueRight = oldValRight + slideDist; } if(newValueLeft < this._valueMin()) { slideDist += (this._valueMin()-newValueLeft); newValueLeft = oldValLeft + slideDist; newValueRight = oldValRight + slideDist; } if ( slideDist != 0 ) { newValues = this.values(); newValues[ 0 ] = newValueLeft; newValues[ 1 ] = newValueRight; // A slide can be canceled by returning false from the slide callback allowed = this._trigger( "slide", event, { handle: this.handles[ index ], value: slideDist, values: newValues } ); if ( allowed !== false ) { this.values( 0, newValueLeft, true ); this.values( 1, newValueRight, true ); } this._rangeStart = newVal; } } }, /* //only for testing purpose value: function(input) { console.log("this is working!"); $.ui.slider.prototype.value.apply(this,arguments); } */ }); })(jQuery);
例
http://jsfiddle.net/omnosis/Swd9S/
用法
HTML
...
JavaScript的
$(function(){ // Slider $('#slider').dragslider({ animate: true, // Works with animation. range: true, // Must have a range to drag. rangeDrag: true, // Enable range dragging. values: [30, 70] }); });
我建议你看一下jQuery UI Slider 。
您也可以尝试jQRangeSlider ，看看演示 。
noUiSlider提供此function。 您可以通过设置behaviour选项来使用它。 它允许固定和用户可更改的范围。 jQueryUI没有依赖关系，如果你更喜欢Zepto而不是jQuery：那也是有效的。
披露：我是插件作者。
您可以尝试查看jQuery UI Slider
上面的链接演示了“范围”选择器function，这是您正在寻找的function，但也有很多其他方法可以使用它。
您可以尝试将拖放触发器添加到$('.ui-slider-range')元素
要么
将您自己的事件添加到$('.ui-slider-range')元素，该元素只触发$('.ui-slider-handle')