拖动UI输入范围滑块的范围

2021/01/24 22:51 · jquery ·  · 0评论
<---------[]=====================================[]-------->

0         10                                     90       100

我需要一个带有两个手柄的输入范围滑块来选择一个范围,并具有拖动范​​围的能力(上图中的等号)。因此,在上面的示例中,start = 10和end = 90,并且通过在两个手柄之间移动整行将其向左拖动:

<[]=====================================[]------------------>

0                                       80                 100

现在开始是0,结束是80,无需拖动手柄即可完成。

哪个库提供此功能?

谢谢。

总览

功能的jQuery UI Slider小部件扩展rangeDrag此功能使用户可以一次拖动整个范围,而不必拖动手柄来移动范围。

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

<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

$(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')

本文地址:http://jquery.askforanswer.com/tuodonguishurufanweihuakuaidefanwei.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!