We Keep Coding

Range slider appears to 'skip' values when using in anger

I am having an issue with the standard html5 range slider when calling the input event in Javascript. When using the slider in anger it appears to skip values. Because I am using this as zoom functionality alongside cropper.j this is giving me quite a headache as it is not honouring the values and stepping over steps of the slide process.
I have read extensively online and cannot seem to come by a solution for this. Is this a browser bug or is there an attribute I am missing?
<input type="range" min="0" max="100" value="0" step="10" class="crop__controls--slider" id="crop__controls--slider" />
...and the Javascript for this;
var event = (isIE()) ? 'change' : 'input'; //ie11 does not support input event
slider.off(event).on(event, function(e) {
var sliderValue = parseInt($(this).val(), 10);
var type;
if (sliderValue > currentZoomSetting) {
type = 'in';
} else {
type = 'out';
}
zoom(type);
currentZoomSetting = sliderValue;
});
Help on this would be much appreciated.
See below a fiddle that if, used excessively, shows that values are skipped using the input event.
var slider = document.getElementById('slider');
slider.addEventListener('input', sliderChange);
function sliderChange() {
console.log(this.value);
}
<input id="slider" type="range" min="0" max="100" value="0" step="10" />

Range Slider oninput function doesn't execute when clicked and dragged

I have a simple range slider defined as follows:
<input class="panning-control" type="range" min="0" max="100" step="1" value="0">
In the Javascript tag I declare
var panControl = document.querySelector('.panning-control');
and then have the following oninput function:
panControl.oninput = function() {
//a bunch of irrelevant computations involving panControl.value
}
The problem is that when I click and drag the slider quickly, the oninput function doesn't execute for each 'step'. for example if I clicked and dragged the slider from 0 to 50, the oninput function should theoretically execute 50 times, because step=1 and the slider went from 0 to 50. Right now, if you click and drag the slider it skips executing the function from most of the steps, and the calculations that I do in oninput done with the wrong numbers because each execution of the function depends on the computations done from the last execution. It does work if i just click on the slider once, and then use the left and right arrow keys to increment and decrement the slider. Does anyone have a solution for this? Is there another knob/control package that I can utilize?

Try using the addEventListener(event, handler, bubbles) method
var panControl = document.querySelector('.panning-control');
panControl.addEventListener("input", function(evt) {
doSomething(evt.target.value);
}, false);
function doSomething(value) {
var output = document.querySelector('.output');
output.textContent = value;
}
<input class="panning-control" type="range" min="0" max="100" step="1" value="0" />
<span class="output"></span>

Dynamically change range slider value when different range slider is moved

I have 2 range sliders, I would like the second slider to update its value dynamicallly when the first slider is changed..
First slider -
<span>Left Front Pressure (psi)<span id="lf_output_s"></span></span>
<input type="range" name="lf_lbs" min="4" max="12" value="<?php echo $lf_lbs;?>" class="sim_setup" id="lf_lbs_range_s">
Second Slider -
<span>Front Stagger (1/8 in)<span id="front_stagger_output_s"></span></span>
<input type="range" name="front_stagger" step="0.125" min="0" max="2" value="<?php echo $front_stagger;?>" class="sim_setup" id="front_stagger_range_s">
Now I output the current value from the first slider using JS -
// Left front pressure //
var lf_lbs_range = document.getElementById("lf_lbs_range_s");
var lf_output = document.getElementById("lf_output_s");
lf_output.innerHTML = lf_lbs_range.value;
lf_lbs_range.oninput = function() {
lf_output.innerHTML = this.value;
}
Here is the output of the second slider -
// Front Stagger //
var front_stagger_range = document.getElementById("front_stagger_range_s");
var front_stagger_output = document.getElementById("front_stagger_output_s");
front_stagger_output.innerHTML = front_stagger_range.value;
front_stagger_range.oninput = function() {
front_stagger_output.innerHTML = this.value;
}
When the first slider changes by one psi or increments by 1 I would like to multiply the change by 0.125. If increments by 2 then multiply by 0.25 etc. and apply it to the current output of slider #2. The reason for this is the first slider actually has an effect or changes the second value in real time..
I cannot figure out how to change the front stagger value since it is only changed when the front stagger slider changes.. How can I adapt the script to change when the left front psi value is changed?

I believe this should work as you require? When moving either slider it should update the other. Using onchangeevent, note: you must release the mouse after adjusting a slider for it to update.
Edit: the math may be slightly wrong to suit your needs but the function works fine. Maths are not my strong point!
var lf_lbs_range = document.getElementById("lf_lbs_range_s");
var lf_output = document.getElementById("lf_output_s");
var front_stagger_range = document.getElementById("front_stagger_range_s");
var front_stagger_output = document.getElementById("front_stagger_output_s");
// Left front pressure //
function adjust_pressure() {
lf_output_s.innerHTML = (document.getElementById("front_stagger_range_s").value / .25);
lf_lbs_range_s.value = (document.getElementById("front_stagger_range_s").value / .25);
}
// Front Stagger //
function adjust_stagger() {
front_stagger_output_s.innerHTML = (document.getElementById("lf_lbs_range_s").value * .25);
front_stagger_range_s.value = (document.getElementById("lf_lbs_range_s").value * .25);
}
adjust_stagger();
adjust_pressure();
<span>Left Front Pressure (psi)<span id="lf_output_s"></span></span><br />
<input type="range" name="lf_lbs" min="4" max="12" value="4" class="sim_setup" id="lf_lbs_range_s" onchange="adjust_stagger();">
<br />
<span>Front Stagger (1/8 in)<span id="front_stagger_output_s"></span></span><br />
<input type="range" name="front_stagger" step="0.125" min="1" max="3" value="0" class="sim_setup" id="front_stagger_range_s" onchange="adjust_pressure();">

Live output in jQuery HTML5 range slider

I'm trying to get a live output from a HTML5 input range slider into a javascript variable. Right now, I'm using <input type="range" id="rangevalue" onchange="arduino()">
The way I have it working is doing what I want, but it's not "live."
I want to have it so while you're dragging the slider, it updates the variable, and not only once you let go. For example: when I'm dragging the slider from 1 to 5, I want the variable to update while I'm dragging, so it will update with 1,2,3,4,5 and not only jump from 1 to 5 once I release the slider.
Is it possible to do such a thing? Any recommendations? I was using the jQuery slider plugin, but it was not touch compatible, which eliminated its purpose.
Thanks for all help in advance!
EDIT - I must not have explained well enough, I know how to get the value of a range slider, I just want to get a "live" output from it.

$("#rangevalue").mousemove(function () {
$("#text").text($("#rangevalue").val())
})
jsFiddle example
Or in plain JS:
var inp = document.getElementById('rangevalue');
inp.addEventListener("mousemove", function () {
document.getElementById('text').innerHTML = this.value;
});

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">

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

using arctext jquery plugin to create dynamic arc of text using range tag

I like the create arctext dynamically so I used arctext jquery plugin and I used the range html tag to select the arc or curve in the text.
This is my html code
<label>Curve:</label>
<input type="range" name="value" id="value" min="-100" max="100" value="0" />
<p id="textvalue"> I wanna to be curve</p>
javascript code :
<script type="text/javascript">
$(function(){
$("#value").change(function () {
var newValue = $('#value').val();
changetext(newValue);
});
function changetext(newValue){
console.log(newValue);
var pos;
if(newValue>0)
pos=1;
else{
pos=-1;
$("#textvalue").hide();
$("#textvalue").show().arctext({radius:newValue, dir: pos});
}
}
});
</script>
But this code work for the first drag. But later on it keeps remains unchanged. The range value is keep on changing which I came to know by console.log.

I think you meant to have the $("textvalue").hide() stuff outside the braces of the if statement. Also the slider goes negative and the text only takes positive values. I took a look at this and the only way I could get it to work was to completely remove the element and replace it with a the different radius so,
$(function(){
$("#value").change(function () {
var newValue = $('#value').val();
changetext(newValue);
});
function changetext(newValue){
console.log(newValue);
var pos;
if(newValue>0)
pos=1;
else{
pos=-1;
}
var text = $("#textvalue").text();
$("#textvalue").remove();
$('body').append('<p id="textvalue">'+ text +'</p>');
$("#textvalue").arctext({radius:Math.abs(newValue), dir: pos});
}
});