Live output in jQuery HTML5 range slider

Yes it is possible. What we need to do is use .mousedown() and .mouseup() with a Boolean value to keep track that we are holding down the mouse mousedown. When the mouse is held down set mousedown to true and use a setTimeout that keeps updating the value. This way while you are dragging slider the value is being constantly updated. For example:

HTML

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

JavaScript

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

You could also use the oninput attribute.

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

More Information on Bugzilla

I think, this solution a good fit for this problem

$("#rangevalue").on("input", function(){ 
  updateSlider() 
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<label id="text">0</label>
<input type="range" value=0 min=0 max=10 id="rangevalue">

To update while dragging the slider, listen for the mousemove event.

For this solution, the target range input element (slider), uses a mousemove event handler that will update for the current (live) position value of the slider.

To limit movement detection to when the slider is being dragged:

• On mousedown, attach a handler for mousemove events.
• On mouseup, remove the mousemove handler.

This is in addition to a change event handler, which is the advised way of getting any final changes to an elements value.

Try it on fiddle ⎤↗︎

<input type="range" id="rangevalue">

var rangevalue = document.getElementById('rangevalue');

rangevalue.addEventListener("change",    arduino);
rangevalue.addEventListener("mousedown", enabletracking);
rangevalue.addEventListener("mouseup",   disabletracking);

function enabletracking()  { rangevalue.addEventListener(   "mousemove", arduino); }
function disabletracking() { rangevalue.removeEventListener("mousemove", arduino); }

Touch Support

Further more you may want to add touch support as some browsers handle things differently.

One thing is touch events can trigger other events we are listening to which will cause problems if we're updating from everywhere. Disabling this default behaviour is possible but has other side effects. For example, page scrolling is usually handled by touch events and will not work while default behaviour is disabled.

rangevalue.addEventListener("touchstart",  enableTouchTracking );
rangevalue.addEventListener("touchend",    disableTouchTracking);
rangevalue.addEventListener("touchcancel", disableTouchTracking);

function enableTouchTracking(event)
 {
    event.preventDefault();
    rangevalue.addEventListener("touchmove", handleTouchMove);
 }
function disableTouchTracking(event) 
 {
    event.preventDefault();
    rangevalue.removeEventListener("touchmove", handleTouchMove);
 }
function handleTouchMove(event)
 {
    event.preventDefault();
    arduino();
 }

I think it is working with your Code.

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

JSFiddle