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>
Related
I was looking online on how to create a different hover message for each slider value, but I couldn't find something that does not use JQuery.
<!-- Slider Input -->
<input type="range" id="mySlider" value="0" min="0" max="10"
style="width:80%;" title="This should change every value."/>
What I'm trying to do is to when the user hovers the slider (bullet); the hover message displays something simple. See examples below:
Example 1: value = 1 -> Hover Msg: "Stage 1 ..."
Example 2: value = 2 -> Hover Msg: "Stage 2 ..."
etc.
You can assign an event listener to the change event and then update the title attribute of the slider, like this...
var slider = document.getElementById("mySlider");
function onSliderChange() {
slider.title = "Stage " + slider.value;
}
slider.addEventListener("change", onSliderChange);
onSliderChange();
<input type="range" id="mySlider" value="0" min="0" max="10" style="width:80%;"/>
The title attribute is the tooltip, or hint text for an element, and I trigger the change event handler once at the start, so it initialises the title with "Stage 0"
Misunderstood what you meant by a slider, try this if you want plain javascript:
let input = Document.getElementbyId("mySlider");
input.addEventListener("mouse up", (e) => {
if(e.currentTarget.value === 1){
console.log("Hover Msg: Stage 1 ...")
// or you could display message in an elsewhere tag
}
else if(e.currentTarget.value === 2){
console.log("Hover Msg: Stage 2 ...")
}
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" />
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();">
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
<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);