jquery single slide handle

Question

Ich habe eine HTML-Seite mit einem gewöhnlichen jquery-Schieberegler von jquery 1.12.1 Aber der Schieberegler hat 2 Handles und ich kann nicht die Codezeile, die zwei Handles generiert. Ich habe den Teil "Werte [x, y]" im Skript in meinem HTML gelöscht, aber es gibt immer noch zwei Punkte. Ich denke, das die JavaScript ist, dass es erzeugt, aber ich bin nicht vertraut mit JS, so

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

Ich denke, das ist das Stück, das etwas tut, aber ich kann nicht verstehen, es Variablen ist; Wo kommen sie her.

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

Wenn jemand weiß, wie dieses Stück Code zu löschen, während machte den Griff erscheint später (ich versuchte, verschiedene Linien zu löschen, aber das hat nicht funktioniert), Vielen Dank im Voraus!

Answer 1

Sie müssen nur die range: true Option entfernen.

Wenn diese Option entfernt wird, verbleibt ein Schieberegler mit nur einem Griff.

Bereich: Wenn dieser Wert auf "true" eingestellt ist, erkennt der Schieberegler, ob Sie zwei Handles haben und erstellen ein stylefähiges Bereichselement zwischen diesen beiden.

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

Auch wenn Sie nur einen Griff wollen, sollten Sie wahrscheinlich die value Eigenschaft verwenden nur, statt 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

Das ist eine for-Schleife, die ich glaube, erstellt ein Handle, solange ich weniger als die Variable handleCount ist. Sie müssen die Variable handleCount so ändern, dass die for-Schleife nur einmal ausgeführt wird, wodurch ein Handle entsteht.

so etwas wie:

handleCount = 1; 

Answer 3

Okay, so dass festgelegt wird, aber eins bleibt und das ist, dass JS sucht nun nach dem anderen Griff eine Farbe im Abstand zwischen den beiden zu schaffen.

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; 
    } 
}, 

Vielleicht ist das etwas, was ich neu schreiben muss. Ich weiß es nicht.

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