<---------[]=====================================[]-------->
0 10 90 100
我需要一个有两个手柄的输入范围滑块来选择范围,以及 拖动范围的能力 上图中的等号)。所以,在上面的例子中,start=10,end=90,通过将两个手柄之间的整条线向左拖动。
<[]=====================================[]------------------>
0 80 100
现在开始是0,结束是80,不需要拖动句柄就能完成。
哪个库提供了这个功能?
谢谢你。
jQuery UI Slider 小部件扩展 rangeDrag
功能。该功能允许用户一次拖动整个范围,而不是拖动手柄来移动范围。
(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.netomnosisSwd9S
超文本标记语言
<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>
脚本语言
$(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]
});
});
noUiSlider 提供了这个功能。您可以通过设置 behaviour
选择权. 它允许固定的和用户可改变的范围。它不依赖于jQueryUI,如果你喜欢Zepto而不是jQuery:那也可以。
声明:我是该插件的作者。 我是该插件的作者。
你也可以尝试 jQRangeSlider,看一看 演示.
我建议你看一下 jQuery UI Slider.
你可以试着检查一下 jQuery UI Slider
上面的链接演示了 "范围 "选择器功能,这就是你要找的,但也有很多其他方法来使用它。
您可以尝试将拖放触发器添加到 "范围 "中。$('.ui-slider-range')
元素,或者将你自己的事件添加到 $('.ui-slider-range')
元素,只是触发 $('.ui-slider-handle')