jqueryUI slider non funziona esattamente

[Johannesynt]

Ho uno slider jquery UI, per scegliere un intervallo orario; quando viene caricata la pagina, di default sulla barra ci sono selzionate le 9:00 e le 17:00. Se ad esempio "tiro avanti" il cursore delle 17:00 a 18:30, tutto ok, però quando poi vado a muovere il cursore per cambiare l'ora delle 9:00 in 8:30, PRIMA mi cambia il valore della seconda ora da 18:30 a 19:00, POI mi lascia effettivamente cambiare il valore da 9:00 a 8:30...vi posto il codice, spero riusciate ad aiutarmi, non so proprio cosa fare

$("#slider-range").slider({
range: true,
min: 30,
max: 1410, // minuti in un giorno = 1440
step: 30, // ci si sposta di 30 minuti alla volta
values: [540, 1020],
slide: slideTime
});
function slideTime(event, ui){
var val0 = $("#slider-range").slider("values", 0);// prende il primo valore
var val1 = $("#slider-range").slider("values", 1);// prende il secondo valore
// parseInt scandisce una stringa e ritorna un intero
var minuti0 = parseInt(val0 % 60); //prende il resto della divisione per 60, cioè i minuti
var ore0 = parseInt(val0 / 60 % 24);//prende l'ora
var minuti1 = parseInt(val1 % 60);//può avere un secondo parametro per specificare la base del numero,default=10
var ore1 = parseInt(val1 / 60 % 24);
var dalle = orario(ore0, minuti0);
var alle = orario(ore1, minuti1);
$("#dalle").text(dalle);
$("#alle").text(alle);
}
function orario(ore, minuti) {
minuti = minuti + "";
ore = ore + "";
if (minuti.length == 1) {
minuti+="0";}// aggiunge un secondo 0 per avere il formato MM
if(ore.length == 1) {
ore="0"+ore;}// aggiunge un primo 0 se l'ora ha una sola cicra per rispettare il formato HH
return ore + ":" + minuti;
}
slideTime();

[Johannesynt]

spero che qualcuno mi illumini, non capisco proprio dov'è il problema

[Johannesynt]

Non sono ancora riusicto a trovare una soluzione, spero qualcuno riesca a d aiutarmi

[KillerWorm]

In effetti c'è una sorta di ritardo nell'aggiornamento.
Ho potuto verificare che dipende dal modo con cui stai recuperando i due valori ($("#slider-range").slider("values", 0)).
Dovresti invece leggerli dall'argomento ui passato alla funzione (ui.values[0]).

Per l'evento slide funziona perfettamente. I valori vengono aggiornati regolarmente quando si trascinano le maniglie.

Dalle prove che ho fatto ho però notato che è sorto un problema collaterale, i valori non sono inizialmente aggiornati. Tu richiamavi la stessa funzione slideTime per inizializzare i valori all'avvio ma ora, con la modifica, la proprietà ui.values risulta undefined.
Ho provato a bindare l'evento slidecreate ma anche così i valori non risultano ancora definiti, per cui ho risolto creando al volo questi valori che a quanto pare è possibile recuperarli come hai fatto tu inizialmente (anche se è strano, perché se li si può recuperare in quel modo non vedo perché la proprietà ui.values debba risultare undefined).
Ho lasciato comunque bindato slidecreate anche se teoricamente si potrebbe richiamare la funzione slideTime esternamente, come hai fatto tu ma passando i valori "sotto forma" di ui.values.

Qui lo script rivisto:

$("#slider-range").bind( "slidecreate", function(e,ui){
  ui.values=[$(this).slider("values", 0),$(this).slider("values", 1)];
  slideTime(e,ui);
}).slider({
  range: true,
  min: 30,
  max: 1410, // minuti in un giorno = 1440
  step: 30, // ci si sposta di 30 minuti alla volta
  values: [540, 1020],
  slide: slideTime
});
function slideTime(e,ui){
  var val0 = ui.values[0];// prende il primo valore
  var val1 = ui.values[1];// prende il secondo valore
  // parseInt scandisce una stringa e ritorna un intero
  var minuti0 = parseInt(val0 % 60); //prende il resto della divisione per 60, cioè i minuti
  var ore0 = parseInt(val0 / 60 % 24);//prende l'ora
  var minuti1 = parseInt(val1 % 60);//può avere un secondo parametro per specificare la base del numero,default=10
  var ore1 = parseInt(val1 / 60 % 24);
  var dalle = orario(ore0, minuti0);
  var alle = orario(ore1, minuti1);
  $("#dalle").text(dalle);
  $("#alle").text(alle);
}
function orario(ore, minuti) {
  minuti = minuti + "";
  ore = ore + "";
  if (minuti.length == 1) {
  minuti+="0";}// aggiunge un secondo 0 per avere il formato MM
  if(ore.length == 1) {
  ore="0"+ore;}// aggiunge un primo 0 se l'ora ha una sola cicra per rispettare il formato HH
  return ore + ":" + minuti;
}

E' possibile che ci siano soluzioni più pulite, ad ogni modo questa sembra funzionare.

[Johannesynt]

Ottimo ti ringrazio moltissimo, non solo hai trovato il problema,mi hai anche fornito la soluzione.