Javascript 拖动UI输入范围滑块的范围 0 10 90 100

我需要一个带有两个控制柄的输入范围滑块来选择范围，以及拖动范围的能力（上图中的等号）。因此，在上面的示例中，start=10和end=90，通过在两个控制柄之间移动整条线将其向左拖动：

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

0         10                                     90       100

0                                       80                 100

现在开始为0，结束为80，无需拖动控制柄即可完成

哪个库提供此功能

---

谢谢。

我建议您看看。

您可以尝试查看

上面的链接演示了“范围”选择器功能，这是您正在寻找的功能，但也有许多其他方法可以使用它

概述

范围拖动

功能的小部件扩展。此功能允许用户一次拖动整个范围，而不必拖动控制柄来移动范围

代码

---

您可以尝试将拖放触发器添加到

$（'.ui slider range'）

元素
或
将您自己的事件添加到只触发

$（'.ui slider range'）上事件的
$（'.ui slider handle'）
元素中。您也可以尝试，看看。
提供了此功能。您可以通过设置来使用它。它允许固定范围和用户可变范围。对jQueryUI没有依赖关系，如果您更喜欢Zepto而不是jQuery：这也行


披露：我是插件作者。
对不起，我忘了提到：我需要能够在滑块上拖动范围。拖动功能不是jQuery UI滑块的一部分。@Dave-我知道，在他添加该要求之前，我回答了他的问题。但也就是说，可能可以修改滑块以支持拖动范围。jQueryUI开发人员已经讨论过添加此功能。还有哪些方法？据我所知，jQuery UI滑块不支持在滑块上拖动范围。它有一个范围，是的，但无法拖动范围本身。您必须拖动范围的端点。@Dave Jarvis我正在制作自己的自定义端点。必须运行，但如果你想看一看：让我知道它是否需要成为一个框架，或者像这样的定制是否可以。@Thomas-看起来它需要一些工作。为了满足他的需要，我建议修改现有的jQueryUI滑块以满足他的需求。看看我的答案。@Justin Ethier，@Dave Jarvis是的，我在这方面做得不多。我只是想展示一下，你可以不费吹灰之力地自己翻滚。出色的工作+1！我们应该考虑在上发布拉取请求-也许他们会将其添加到未来版本（？）没问题，我希望他们的团队能够接受：）好东西！不过需要注意的是：对于“原样”代码，结束注释之前的最后一个结束大括号}后面有一个逗号，这将生成一个javascript错误，具体取决于您使用的浏览器。这太棒了，谢谢。其他用户使用两位：对于那些使用require.js的用户，您可以将此扩展名保存为自己的文件，并使用类似于jquery ui的垫片：
'jquery-ui-dragslider'：{deps:['jquery-ui']，导出：“$”}
，并且确保将dragslider中的方法调用为
$（'.\35; slider'）。dragslider（）
，而不是
slider（）
，或者，您将得到一个关于组件未初始化的jquery ui错误。此代码是否适用于jquery.ui.slider.js的较新版本（1.10.3）？这些更改可以被拉入git吗？这是我使用的方法，因为它稍微干净一些，但是当拖动滑块时，您必须提供一些句柄管理。设置ui.值[0]和[1]是最直接的方法，但您的实现将决定如何确定这些值。我使用了pageX和slider.left比较以及设置的刻度宽度来确定拖动时移动值的刻度数。YMMV。
<[]=====================================[]------------------>

0                                       80                 100

(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);

<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]        
});
});