jquery单滑手柄

Question

我有一个从jquery 1.12.1 的普通jQuery滑块的HTML页面但滑块有2个手柄，我无法找到生成两个手柄的代码行。我已经删除了我的html脚本中的“values [x，y]”部分，但它仍然给出了两个句柄。 我认为这是产生它的JavaScript的，但我不熟悉的JS，所以

_createHandles: function() { 
    var i, handleCount, 
     options = this.options, 
     existingHandles = this.element.find(".ui-slider-handle"), 
     handle = "<span tabindex='0'></span>", 
     handles = []; 

    handleCount = (options.values && options.values.length) || 1; 

    if (existingHandles.length > handleCount) { 
     existingHandles.slice(handleCount).remove(); 
     existingHandles = existingHandles.slice(0, handleCount); 
    } 

    for (i = existingHandles.length; i < handleCount; i++) { 
     handles.push(handle); 
    } 

    this.handles = existingHandles.add($(handles.join("")).appendTo(this.element)); 

    this._addClass(this.handles, "ui-slider-handle", "ui-state-default"); 

    this.handle = this.handles.eq(0); 

    this.handles.each(function(i) { 
     $(this) 
      .data("ui-slider-handle-index", i) 
      .attr("tabIndex", 0); 
    }); 

我认为这是一个做了一块，但我不明白它的变量;他们来自哪里。

for (i = existingHandles.length; i < handleCount; i++) { 
     handles.push(handle); 
    } 

如果有人知道如何删除这段代码，同时使手柄出现之后（我试图删除不同的线路，但没有工作），非常感谢你提前！

Answer 1

你只需要删除range: true选项。

当这被删除时，你剩下的只有一个句柄的滑块。

范围：如果设置为true，则滑块将检测您是否有两个手柄 并在这两者之间创建可修改的范围元素。

http://api.jqueryui.com/slider/#option-range

另外，如果你只想要一个手柄，你应该只使用value财产，而不是values。

http://api.jqueryui.com/slider/#option-value

$(function(){ 
 

 
//creates 2 handles 
 
$(".example-a").slider({ 
 
    range: true, 
 
    values: [0] 
 
}); 
 

 
//creates 1 handle slider 
 
$(".example-b").slider({ 
 
    values: [0] 
 
}); 
 

 
//also creates 1 handle slider 
 
$(".example-c").slider({ 
 
    value: 0 
 
}); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    
 
<h2>Example A - 2 handles<h2> 
 
<div class="example-a"></div> 
 

 
<h2>Example B - 1 handle (values)<h2> 
 
<div class="example-b"></div> 
 

 
<h2>Example C - 1 handle (value)<h2> 
 
<div class="example-c"></div>

Answer 2

这是一个循环，我相信创建一个句柄，只要我小于变量handleCount。您将需要更改变量handleCount，以便for循环只执行一次，从而创建一个句柄。

类似：

handleCount = 1; 

Answer 3

好了，所以这是固定的，但有一件事是，那就是JS会搜索其他手柄创建两个之间的间距的颜色。

if (!this.range || !this.range.length) { 
      this.range = $("<div>") 
       .appendTo(this.element); 

      this._addClass(this.range, "ui-slider-range"); 
     } else { 
      this._removeClass(this.range, "ui-slider-range-min ui-slider-range-max"); 

      // Handle range switching from true to min/max 
      this.range.css({ 
       "left": "", 
       "bottom": "" 
      }); 
     } 
     if (options.range === "min" || options.range === "max") { 
      this._addClass(this.range, "ui-slider-range-" + options.range); 
     } 
    } else { 
     if (this.range) { 
      this.range.remove(); 
     } 
     this.range = null; 
    } 
}, 

也许这是我必须重写的东西。我不知道。

// Handle range switching from true to min/max 
     this.range.css({ 
      "left": "", 
      "bottom": ""