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

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

Related

Get an accurate value of Range Inputs onmousemovebase on the mouse position

How can you get the value of range input based on the cursor position on mousemove?
Something like this;
$('.range').on('mousemove', function(){
var rangeValue = $(this).val();
console.log(rangeValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="0" max="100" class="range">
To get the current value where the mouse is hovering over the input, you can use the offsetX of the event and calculate the position like so:
$('.range').on('mousemove', function(e){
const offset = (e.offsetX / e.target.clientWidth) * parseInt(e.target.getAttribute('max'),10);
console.log('Hover place: ' + Math.round(offset) + '%');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="0" max="100" class="range">
Your current code works if you move the mouse only over the range element. To get it to work throughout your webpage you need
$(document).on('mousemove', function(){
var rangeValue = $('.range').val();
console.log(rangeValue);
});
If you're trying to get the value of the slider when you move the slider, you can use .change just like with any other input.

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>

Updating span inner html with jQuery .html not working in IE

I am trying to update a span with the value of a range input as it is being slided. It works in Chrome and Firefox but in IE (Tried both 10 & 11). There's no error in console, the span inner html is just blank. I tried with .text instead of .html but no luck. What is happening here?
function onRangeInput(myobj) {
$(myobj).val();
var theid= $(myobj).attr('id');
var spanid = theid + "_span";
$("#" + spanid).html($(myobj).val());
}
Okay, upon further looking, I guess this code is fine and there's something wrong in the way I am calling the fucntion. Here's the html,
<input type="range" id="rangefirst" name="rangefirst" min="0" max="100" value="51" onChange="rangeChanged(this)" oninput="onRangeInput(this)"/>
<span id="rangefirst_span"></span>
On Chrome and FF the function is getting called when the slider is moved. IE ignores the event. What am I doing wrong?
I created a JSFiddle for your question last update. oninput is not supported in IE 10; you can use something like this:
HTML:
<input type="range" id="rangefirst" name="rangefirst" min="0" max="100" value="51"/>
<span id="rangefirst_span"></span>
Javascript:
$('#rangefirst').on("change mousemove", function() {
onRangeInput(this);
});
function onRangeInput(myobj) {
var theid= $(myobj).attr('id');
var spanid = theid + "_span";
$("#" + spanid).html($(myobj).val());
}
JSFiddle: http://jsfiddle.net/L5Lqafus/2/
More information for oninput bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=853670

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

How to real-time move the range type input's slider using javascript without refreshing page?

<input type="range" value="0" min="0" max="100">
I did try the following, but the slider no response.
var i = 0;
setInterval(function(){
document.querySelector('input[type=range]').value = i++;
}, 1000);
or impossible?
you can do it with stepUp and stepDown functions
document.getElementById("myslider").stepUp(1);
document.getElementById("myslider").stepDown(1);
working demo : http://jsfiddle.net/dp6cwoom/
works fine in Chrome http://jsfiddle.net/gCSFV/
<input type="range" value="0" min="0" max="100">
<script type="text/javascript"><!--
document.querySelector('input[type=range]').value = 30;
--></script>
Works ok in Safari4 (Win).
Ensure, your code is after input element or is called inside onload or similar function.
It should work.
As per the MDC doc on document.querySelector
Its dsupported by IE8, FF3.5, Chrome1, Safari3.2 and so is input type=range
Syntax
element = document.querySelector(selectors);
Returns null if no matches are found;
otherwise, it returns the first
matching element.
Be careful that querySelector returns only first element of the matched ones.
So, document.querySelector('input[type=range]') wont be as desirable as something like document.querySelector('#myrange')
I found a way but not very good: to modify the style of input dynamically.
var i = 0,
oRange = document.querySelector('input[type=range]');
setInterval(function(){
oRage.value = i;
oRage.style.fontSize = i + 'px';
i++;
}, 1000);

Categories