jQuery एचटीएमएल 5 रेंज स्लाइडर में लाइव आउटपुट

Question

मैं एक HTML5 इनपुट रेंज स्लाइडर से एक जावास्क्रिप्ट चर में लाइव आउटपुट प्राप्त करने का प्रयास कर रहा हूं। अभी, मैं <input type="range" id="rangevalue" onchange="arduino()">

जिस तरह से मैं इसे काम कर रहा हूं वह वही कर रहा है जो मैं चाहता हूं, लेकिन यह "लाइव" नहीं है। मैं स्लाइडर को खींचते समय ऐसा करना चाहता हूं, यह चर को अद्यतन करता है, न केवल एक बार जाने के बाद। उदाहरण के लिए: जब मैं स्लाइडर को 1 से 5 तक खींच रहा हूं, तो मैं चाहता हूं कि जब मैं खींच रहा हूं तो वेरिएबल अपडेट हो जाए, इसलिए यह 1,2,3,4,5 के साथ अपडेट हो जाएगा और न केवल 1 से 5 तक कूद जाएगा मैं स्लाइडर को छोड़ देता हूं।

क्या ऐसा कुछ करना संभव है? कोई सिफारिशें? मैं jQuery स्लाइडर प्लगइन का उपयोग कर रहा था, लेकिन यह संगत स्पर्श नहीं था, जिसने अपने उद्देश्य को समाप्त कर दिया।

अग्रिम में सभी मदद के लिए धन्यवाद!

संपादित करें - मुझे पर्याप्त रूप से पर्याप्त समझाया नहीं जाना चाहिए, मुझे पता है कि एक रेंज स्लाइडर का मूल्य कैसे प्राप्त करें, मैं बस उससे "लाइव" आउटपुट प्राप्त करना चाहता हूं।

Answer 1

$("#rangevalue").mousemove(function() { 
    $("#text").text($("#rangevalue").val()) 
}) 

jsFiddle example

या सादा जे एस में:

var inp = document.getElementById('rangevalue'); 
inp.addEventListener("mousemove", function() { 
    document.getElementById('text').innerHTML = this.value; 
}); 

Answer 2

हां यह संभव है। हमें यह जानने के लिए कि mousedown माउस को दबाए रखने के लिए हमें बूलियन मान के साथ .mousedown() और .mouseup() का उपयोग करना है। जब माउस को mousedown को सही पर सेट किया जाता है और setTimeout का उपयोग करता है जो मान को अपडेट करता रहता है। इस तरह जब आप स्लाइडर खींच रहे हैं तो मूल्य लगातार अद्यतन किया जा रहा है। उदाहरण के लिए:

एचटीएमएल

<label id="text">0</label> 
<input type="range" value=0 min=0 max=10 id="rangevalue"> 

जावास्क्रिप्ट

var mouseDown = false 

$("#rangevalue").mousedown(function() { 
    mouseDown = true; 
    updateSlider() 
}); 

$("#rangevalue").mouseup(function() { 
    mouseDown = false; 
}); 

function updateSlider() { 
    if(mouseDown) { 
     // Update the value while the mouse is held down. 
     $("#text").text($("#rangevalue").val()); 
     setTimeout(updateSlider, 50); 
    } 
} 

Here is a fiddle

Answer 3

मैं इसे अपने कोड के साथ काम कर रहा है लगता है।

<input type="range" id="rangevalue" onchange="arduino()"> 
<p id="t"></p> 
    <script> 
     function arduino() { 
    document.getElementById("t").innerHTML = document.getElementById("rangevalue").value; 
}</script> 

JSFiddle

Answer 4

तुम भी oninput विशेषता का उपयोग कर सकते हैं।

<input type="range" min="5" max="10" step="1" 
    oninput="arduino()" onchange="arduino()"> 

More Information on Bugzilla