Eingabewerte verbergen, wenn der Schieberegler für den Preisbereich während des Gleitens zu Ende geht

Question

Ich verwende JQuery UI SLider für Preisbereich-Schieberegler. Ich möchte Preisbereichswerte standardmäßig auf der Ladeseite ausblenden. Wenn der Benutzer den Schieberegler verschiebt, sollten die Werte im Eingabefeld angezeigt werden, aber nach dem Maximal- und Minimalwert sollten die Eingabewerte wieder ausgeblendet werden. Mein Code für Schieber ist:

$("#price-slider").slider({ 
    range: true, 
    animate: true, 
    min: 1000, 
    max: 500000, 
    values: [1000, 500000], 
    create: function(event, ui) { 
     valtooltip($(this), ui); 
    }, 
    slide: function(event, ui) { 
     valtooltip($(this), ui); 
     $("#amountx").val("" + ui.values[0] + "-" + ui.values[1]); 
    }, 
    stop: function(event, ui) { 
     valtooltip($(this), ui); 
     $("#amountx").focus(); 
    } 

}); 

Dies ist HTML:

<div class="col-md-4 slider-lbl"> 
    <div class="spacer-b15"> 
     <label for="amountx">Price range:</label> 
      <input type="text" name="pprice" id="amountx" class="slider-input" onfocus="return getFinderData();"> 
    </div> 
</div> 
<div class="col-md-8 slider-cntnt"> 
    <div class="col-md-12"> 
     <div class="slider-wrapper black-slider"> 
      <div id="slider-range"></div> 
     </div> 
    </div> 
</div> 

Screenshots: enter image description here

Answer 1

In Ihrem Objekt slider, gibt es das Verfahren als "Schieber()" so in Mit dieser Methode können Sie überprüfen, ob die Folienwerte max und min sind. Dann kannst du es zeigen oder verstecken.

Es wäre so etwas;

$("#price-slider").slider({ 
    range: true, 
    animate: true, 
    min: 1000, 
    max: 500000, 
    values: [1000, 500000], 
    create: function(event, ui) { 
     valtooltip($(this), ui); 
    }, 
    slide: function(event, ui) { 
     valtooltip($(this), ui); 
     $("#amountx").val("" + ui.values[0] + "-" + ui.values[1]); 
     if((ui.values[0] == 1000) && (ui.values[1] == 500000)){ 
      $("#amountx").hide(); 
     }else{ 
      $("#amountx").show(); 
     } 
    }, 
    stop: function(event, ui) { 
     valtooltip($(this), ui); 
     $("#amountx").focus(); 
    } 

}); 

Ich habe keine Möglichkeit, es tatsächlich zu testen, also halte mich auf dem Laufenden, wenn es funktionieren wird.