We Keep Coding

input event - losing focus while dragging input element

I'm trying to make a score module using a range input. I'm using the input event to achieve this. The range input works fine, but when I add event, it loses focus shortly after dragging begins.
This is how it looks:
document.querySelector("#score").addEventListener("input", e => {
console.log(e.target.value);
});
<input type="range" min="1" max="10" value="10" draggable="true" class="score theme" id="score" step="0.1">

That happens because you added draggable="true" to the element. So the behaviour is ambiguous, should the browser allow you to move the trackball or should the browser drag the element around the page?
The two behaviours are conflicting, so in the first moment it works properly as an input range and you're able to move it around, but then it allows you to drag the element.
What's your expected behaviour?
document.querySelector("#score").addEventListener("input", e => {
console.log(e.target.value);
});
<input type="range" min="1" max="10" value="10" class="score theme" id="score" step="0.1">

draggable="true" doesn’t do what you think it does. An <input type="range"> has a draggable component to it by default. The draggable attribute makes it so that you can drag the entire element.
Removing this attribute gives the expected behaviour:
document.getElementById('score').addEventListener('input', e => {
console.log(e.target.value);
});
<input type="range" min="1" max="10" value="10" id="score" step="0.1">

This seems to be a problem with the draggable="true" attribute and not the JavaScript code. The draggable attribute allows us to make the element draggable around the DOM, i.e. from one position to another in the viewport.
Therefore, when one tries to drag the range handle, the whole slider gets dragged along, instead of just the handle, which is what you described as "losing focus".
So, the solution is to simply remove the draggable=true attribute. I made a pen on CodePen to demonstrate this. https://codepen.io/aryan_02/pen/WPNBYm
Notice what the draggable attribute does. I hope this helps you.

Disabling keyboard use for input range

I have a standard form with a slider:
`<input type="range" min="0" max="100" value="50" id="my_slider" name="my_slider">`
The value of the slider can be selected either with the mouse or with the arrow keys (after clicking on the slider). How can I disable the keyboard and force the user to position the slider with the mouse?
One possibility is obviously to disable the arrow keys on the whole page with Java Script, but I would like to avoid that if possible.
Thank you.

You can block the keys with onkeydown event...
<input type="range" min="0" max="100" value="50" id="my_slider" name="my_slider"
onkeydown="event.preventDefault()">

You can add a key listener to the input and call Event.preventDefault() on the event which will cancel it, preventing the default action from being triggered:
var mySlider = document.getElementById("my_slider");
mySlider.addEventListener("keydown", function(event) {
event.preventDefault();
return false;
});
<input type="range" min="0" max="100" value="50" id="my_slider" name="my_slider">

How to dynamically update range slider

I've created the following code to show the user their range slider value. However, it only shows the value when the user stops moving the slider. Is there a way to show the value WHILE the user drags the range slider? I'm looking for a way to do this in vanilla JS.
function updateInput(val) {
document.getElementById('textInput').innerHTML=val;
}
<input type="range" name="rangeInput" min="0" max="100" onchange="updateInput(this.value);">
<p id="textInput"></p>

Here you go:
<input type="range" name="rangeInput" min="0" max="100" onchange="updateInput(this.value);" oninput="updateInput(this.value)" >
<p id="textInput"></p>
oninput is not supported in IE10, so you have to use both, oninput and onchange.
Here is the demo

Use oninput instead of onchange.
Magical proof!

onmousemove function make this happen:
<input type="range" name="rangeInput" min="0" max="100" onmousemove="document.getElementById('textInput').innerHTML=this.value;">
<p id="textInput"></p>

Circle slider for weather application

I have tried to look for a circle slider for an animation. It would work like the following:
<input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
<span id="range">0</span>
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
but instead of sliding horizontally it would need to go in a circle. Is there anything similar which has been built already? I am probably not experienced enough to build it from scratch.

I believe the code you are looking for is here:
http://baijs.nl/tinycircleslider/

range input disable does not work in chrome

I am disabling my range input however in chrome it shows it grayed out but it is still usable.
<input type="range" disabled min="0" max="100"/>
I would assume the above would not allow you to change its value.
Am I doing it wrong?
jsFiddle
Relevant specification Disabled

Here is the Chrome bug report, guess just need to wait for version 15 as the commenters mentioned.
Bug 54820

you can remove all binded events of that specific scroll group to make that scroll disable like:
<div id="fieldset1">
<input type="range" disabled min="0" max="100" readonly="1"/>
</div>
<script>
$(":range").rangeinput();
$('#fieldset1 *').unbind(); // for all events
</script>
its works ..
no need to disable text field; beacause on form submission that field will not be posted ..

My solution JSFIDDLE (Works fine in default android browser)
html
<input id="range" type="range" value="10" min="0" max="30" step="10"/>
<button id="disableBtn">Disable</button>
JS
document.getElementById('disableBtn').addEventListener('input', filter);
document.getElementById('disableBtn').addEventListener('click', disable);
function disable(){
document.getElementById('range').disabled = !document.getElementById('range').disabled;
}
function filter(){
if(document.getElementById('range').disabled){
document.getElementById('range').value = document.getElementById('range').defaultValue;
}
}

I found a corny solution for chrome, because it doesn't seem like you can disable it from user input. Put a div over it so a user cannot interact with it. Not pretty but works:
<div style="position:relative;">
<div style="position:absolute;z-index:5;width:100%;height:100%;"></div>
<input type="range" disbaled=True min="0" max="100" value="0"/><span id="v">100</span>
</div>