ui trượt với đầu vào hộp văn bản

Question

Chúng tôi có thanh trượt ui mà chúng tôi sử dụng và nó hoạt động hoàn hảo.

mã:

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

Như bạn có thể thấy chúng tôi cho phép người dùng chọn bất cứ điều gì giữa 0 và 5.000.000.

Html là:

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

Những gì tôi muốn làm là thêm một yếu tố đầu vào văn bản mà làm việc trong sự hòa hợp với thanh trượt, do đó, người dùng trượt hộp texy tăng, giảm bất cứ điều gì ..

Hoặc nếu người dùng nhập số vào phần tử đầu vào, thanh trượt sẽ di chuyển một cách thích hợp.

Bất kỳ trợ giúp nào?

Preview là:

Answer 1

Bạn cần cập nhật các yếu tố input (như bạn đang làm gì bây giờ cho các phần tử #amount) trên slide:

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

Ngoài ra, bạn cần phải liên kết với sự kiện change cho phần tử input và gọi phương thức value của thanh trượt:

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

Ví dụ:http://jsfiddle.net/andrewwhitaker/MD3mX/

Không có xác nhận xảy ra ở đây (bạn phải bao gồm "$" đăng ký cho nó hoạt động). Bạn có thể thêm một số vệ sinh đầu vào mạnh mẽ hơn để tăng cường nó.