deslizador ui con entrada de cuadro de texto

Question

Tenemos un control deslizante ui que utilizamos, y funciona sin problemas.

código:

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

Como se puede ver permitimos usuario elegir entre el 0 y 5.000.000.

HTML es:

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

Lo que quiero hacer es añadir un elemento de entrada de texto, que trabaja en armonía con el control deslizante, de manera que el usuario desliza el cuadro de texy aumenta, disminuye lo que sea ..

O si el usuario ingresa los números en el elemento de entrada, el control deslizante se mueve apropiadamente.

¿Alguna ayuda, por favor?

de vista previa es:

Answer 1

necesita actualizar el elemento input (como lo estás haciendo ahora para el elemento #amount) en slide:

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

Además, es necesario vincularse al evento change para el elemento input y llamar al método value del control deslizante:

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

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

No hay validación pasando aquí (debe incluir el "$" firmar para que funcione). Podría agregar un sanitario de entrada más robusto para mejorarlo.