dispositivo di scorrimento ui con casella di testo

Question

Abbiamo uno slider ui che utilizziamo e funziona perfettamente.

codice:

jQuery(function() { 
jQuery("#slider-range-min").slider({ 
    range: "min", 
    value: 1, 
    step: 1000, 
    min: 0, 
    max: 5000000, 
    slide: function(event, ui) { 
     jQuery("#amount").val("$" + ui.value); 
    } 
}); 
jQuery("#amount").val("$" + $("#slider-range-min").slider("value")); 
}); 

Come potete vedere ci permettono all'utente di scegliere nulla tra 0 e 5.000.000.

HTML è:

<div id="slider-range-min" style="width: 460px; float:left;margin:10px;"></div> 

Quello che voglio fare è aggiungere un elemento di input di testo, che lavora in armonia con il cursore, in modo da utente scorre la casella di Texy aumenta, diminuisce qualunque cosa ..

O se l'utente digita numeri nell'elemento di input, il cursore si sposta in modo appropriato.

Qualsiasi aiuto per favore?

Preview è:

Answer 1

è necessario aggiornare l'elemento input (come si sta facendo ora per l'elemento #amount) su slide:

$("#slider").slider({ 
    range: "min", 
    value: 1, 
    step: 1000, 
    min: 0, 
    max: 5000000, 
    slide: function(event, ui) { 
     $("input").val("$" + ui.value); 
    } 
}); 

Inoltre, è necessario associare all'evento change per l'elemento input e chiamare il metodo value del dispositivo di scorrimento:

$("input").change(function() { 
    var value = this.value.substring(1); 
    console.log(value); 
    $("#slider").slider("value", parseInt(value)); 
}); 

Esempio:http://jsfiddle.net/andrewwhitaker/MD3mX/

Non c'è alcuna convalida succedendo qui (è necessario includere il "$" segno per farlo funzionare). Potresti aggiungere alcuni servizi igienico-sanitari più robusti per migliorarlo.