ui स्लाइडर टेक्स्ट बॉक्स इनपुट

Question

हमारे पास एक ui स्लाइडर है जिसका हम उपयोग करते हैं, और यह बेकार ढंग से काम करता है।

कोड:

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

आप देख सकते हैं हम उपयोगकर्ता 0 और 5,000,000 के बीच कुछ भी चुन सकते हैं।

HTML है:

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

मुझे क्या करना चाहते हैं एक पाठ इनपुट तत्व है जो स्लाइडर के साथ सद्भाव में काम करता है, को जोड़ने है, तो उपयोगकर्ता स्लाइड के रूप में texy बॉक्स बढ़ जाती है, कम हो जाती है जो कुछ भी ..

या यदि उपयोगकर्ता इनपुट तत्व में संख्या टाइप करता है तो स्लाइडर उचित रूप से चलता है।

कोई मदद कृपया?

पूर्वावलोकन है:

Answer 1

आप input तत्व (जैसे आप #amount तत्व के लिए अब कर रहे हैं) slide पर अद्यतन करने की आवश्यकता: इसके अतिरिक्त

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

, आप की जरूरत है input तत्व के लिए change ईवेंट से जुड़ें और स्लाइडर के value विधि को कॉल करें:

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

उदाहरण:http://jsfiddle.net/andrewwhitaker/MD3mX/

कोई सत्यापन यहां चल रहा है (यदि आप "$" शामिल करना चाहिए यह काम करने के लिए साइन इन करें)। आप इसे बढ़ाने के लिए कुछ और मजबूत इनपुट स्वच्छता जोड़ सकते हैं।