Come faccio a cambiare dinamicamente i valori min e max per il cursore ui jquery?

Question

Così ho una pagina con un cursore jQuery UI su di esso inizializzato con il seguente:

var min = $("#attrInformation").data("lowest_price"), 
max = $("#attrInformation").data("highest_price"); 

    $("#slider-range").slider({ 
     range: true, 
     min: min, 
     max: max, 
     values: [ min, max ], 
     slide: function(event, ui) { 
      var start = ui.values[0], 
      end = ui.values[1]; 

      $("#startPrice").text(start); 
      $("#endPrice").text(end); 
     }, 
     stop: function(event,ui){ 
      var start = ui.values[0], 
      end = ui.values[1]; 

      refineObject.price_min = start; 
      refineObject.price_max = end; 

      refineResults(refineObject); 
     } 
    }); 

e voglio essere in grado di cambiare il min, max, e il valore per il quale le due maniglie sono Based sui risultati di una chiamata Ajax. qualcosa di così ho provato in questo modo:

$.get("ajax.php",options,function(data){ 
    $('.middle_container').html(data);   

    $('#slider-range').slider("option", "min", $('.middle_container').find('.start_price').val()); 
    $('#slider-range').slider("option", "max", $('.middle_container').find('.end_price').val()); 
    $('#slider-range').slider("value", $('#slider-range').slider("value")); 

     }); 

dove la mia min e max sono contenute in due div nascosti con la classe start_price e end_price. questo al momento non funziona, non aggiorna il prezzo massimo e la maniglia destra del cursore appare sopra a sinistra fuori posizione. qualche suggerimento su come farlo funzionare? sto usando PHP per il back-end. il codice start_price e end_price è funzionante e corretto.

Answer 1

Assicurarsi che $('.middle_container').find('.start_price').val() e $('.middle_container').find('.end_price').val() restituiscano valori corretti. Inoltre per impostare il valore del cursore è necessario utilizzare la stessa sintassi che si sta utilizzando per l'impostazione dei valori min/max. Anche

Prova questa

$.get("ajax.php",options,function(data){ 
    $('.middle_container').html(data);   

    $('#slider-range').slider("option", "min", $('.middle_container').find('.start_price').val()); 
    $('#slider-range').slider("option", "max", $('.middle_container').find('.end_price').val()); 
    $('#slider-range').slider("option", "value", $('#slider-range').slider("value")); 

}); 

Answer 2

Distruggere l'cursore prima, che rimuove completamente la funzionalità di scorrimento. Ciò restituirà l'elemento al suo stato pre-init.

$("#selector").slider("destroy"); 

Dopo di che è possibile aggiungere nuovi valori al cursore come,

$("#selector").slider({ 
    range: "max", 
    min: 0, // min value 
    max: 200, // max value 
    step: 0.1, 
    value: 200, // default value of slider 
    slide: function(event, ui) { 
     $("#amount").val(ui.value); 
    } 
});​ 

Questo funziona.

Answer 3

Se si desidera eseguire questa operazione su un valore di input che modifica, è possibile fare qualcosa di simile.

$('#inputid').focusout(function() { 

    // slider destroy and create as Shailesh showed 
}); 

Stavo per usare keyup invece di messa a fuoco, ma a seconda delle verifiche interne si fanno, si potrebbe finire per ricostruire il vostro cursore molte volte che non sarebbe un vantaggio, come si usa solito fino a che non andare avanti dall'input.