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": ""