We Keep Coding

Is touchend the phone equivalent of onmouseup in js?

I have my web app working fine with computers, but can't seem to get it to work on mobile phones mainly because the onmouseup isn't being fired off. So I added the touchend event thinking it would be the same, but it didn't help. How do I get the same behavior of onmouseup on the phone?
Basically, I have a range slider and I want the release slider part of it to work on phones
<input id="slider" class="slider" type="range" min="0" max="100" value=50 onmouseup="handleSubmit()" touchend="handleSubmit()"/>
I've tried it on mobile safari and chrome... neither work

You don't need to rely on mouseup nor touchend. The input element offers another event which comes in handy: onchange.
This input fires as soon the input's value changed - because the user released the slider.
Here's an example:
function handleSubmit(e) {
console.log(e.value)
}
<input id="slider" class="slider" type="range" min="0" max="100" value=50 onchange="handleSubmit(this)" />

I'm stupid... it's supposed to be ontouchend
<input id="slider" class="slider" type="range" min="0" max="100" value=50 onmouseup="handleSubmit()" touchend="handleSubmit()"/>
still new to js haha

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>

How do I create one of those draggable settings bars in html?

I've seen those draggable settings bars for random things, but I can't seem to remember what they were called, and thus am having a hard time to search it up on google.
It was one of those bars where if you dragged to the right, the value increases and if you dragged it to the left, the value decreases.
What's the easiest way to create one of these in html/css/js?

What you are looking for is called a range and is an input element:
<input type="range" min="1" max="10">
To get the out put you could use JavaScript and <output>:
<form oninput="x.value=parseInt(a.value)">
<input type="range" id="a" value="50">
<output name="x" for="a b"></output>
</form>
JSFiddle Example

Jquery mobile dual range slider reload with new range

Slider works well with initial range. Here is html for slider, initial range is 0 to 100
<div data-role="rangeslider">
<input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
<input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>
<button id="btnReload" onclick="reloadRangeSlider(200, 300)"></button>
I want to implement a javascript function that can help to reload the slider with new range like 200 to 300. In my case, want to reload slider by clicking on btnRelaod button.
function reloadRangeSlider(min, max){
//To do: reload functionality goes here
}

Here is the answer of my question
function reloadRangeSlider(min, max){
$('#range-1a').attr("min", min).attr("max", max).val(min);
$('#range-1b').attr("min", min).attr("max", max).val(max);
$('#range-1a').slider("refresh");
$('#range-1b').slider("refresh");
}

According to JQuery Mobile Docs
If you manipulate a slider via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:
$("#yourSlider").attr("min", min)
$("#yourSlider").attr("max", max)
$("#yourSlider").slider("refresh");
or you can use
$("#yourSlider").attr("min", min).attr("max", max).slider("refresh");

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>