javascript 拖动 UI 输入范围滑块的范围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5955343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drag the Range of a UI Input Range Slider
提问by Rudiger
<---------[]=====================================[]-------->
0 10 90 100
I need an input range slider with two handles to select a range, and the ability to drag the range(the equals signs in the above diagram). So, in the above example, start=10 and end=90, and it is dragged left by shifting the entire line between the two handles:
我需要一个带有两个手柄的输入范围滑块来选择一个范围，以及拖动范围的能力（上图中的等号）。因此，在上面的示例中，start=10 和 end=90，并通过在两个手柄之间移动整条线来向左拖动它：
<[]=====================================[]------------------>
0 80 100
Now Start is 0 and End is 80, accomplished without dragging the handles.
现在开始为 0，结束为 80，无需拖动手柄即可完成。
What library offers this functionality?
哪个库提供此功能？
Thank you.
谢谢你。
回答by Gergely Fehérvári
Overview
概述
jQuery UI Sliderwidget extension for a rangeDragfeature. This feature allows the user to drag the entire range at once, rather than having to drag the handles to move the range.
用于rangeDrag功能的jQuery UI Slider小部件扩展。此功能允许用户一次拖动整个范围，而不必拖动手柄来移动范围。
Code
代码
https://gist.github.com/3758297
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);
Example
例子
http://jsfiddle.net/omnosis/Swd9S/
http://jsfiddle.net/omnosis/Swd9S/
Usage
用法
HTML
HTML
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.slider.custom.js"></script>
...
<div id="slider"></div>
JavaScript
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]
});
});
回答by Lg102
noUiSlideroffers this feature. You can use it by setting the behaviouroption. It allows for both fixed and user-changeable ranges. There are no dependencies on jQueryUI, and if you prefer Zepto over jQuery: that works too.
noUiSlider提供了这个功能。您可以通过设置behaviour选项来使用它。它允许固定和用户可更改的范围。没有对 jQueryUI 的依赖，如果你更喜欢 Zepto 而不是 jQuery：那也行。
Disclosure:I am the plugin author.
披露：我是插件作者。
回答by ghusse
You can also try jQRangeSlider, take a look at the demo.
你也可以试试jQRangeSlider，看看演示。
回答by Justin Ethier
I recommend you have a look a the jQuery UI Slider.
我建议你看看jQuery UI Slider。
回答by Thomas Shields
You might try checking out the jQuery UI Slider
您可以尝试查看jQuery UI Slider
The link above demonstrates the "range" selector feature, which is what you're looking for, but there are lots of other ways to use it as well.
上面的链接演示了您正在寻找的“范围”选择器功能，但还有很多其他方法可以使用它。
回答by Johan Olsson
You can try adding the drag + drop triggers to the $('.ui-slider-range')element
OR
add you own event to the $('.ui-slider-range')element that just trigger the events on the $('.ui-slider-handle')
您可以尝试将拖放触发器添加到$('.ui-slider-range')元素
或
将您自己的事件添加到$('.ui-slider-range')刚刚触发事件的元素$('.ui-slider-handle')
