Dynamically change range slider value when different range slider is moved - javascript

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();">

Related

Range slider - avoid moving forward when reaching a value specified in another element

lets say i have a range slider going from value 1 to 100
by default i would be able to slide it going from 1 to 100.
I would like the slider to block, when reaching a value specified in another element.
I've been trying it like this (where 20 would be the value in the element, just easier for the example), but that isn't perfect. the Thumb does indeed stop, but i think internally if you keep sliding, it will remember that value, even if you don't see it.
EDIT:
would a for loop be something good here?
for(i=slider.value;i<20;i++)
...
if (slider.value >=20)
slider.value=20
Anyone better at this who can help?
Wrap everything in a <form> if you haven't already then assuming your limit is set by another <input>, assign an event handler to the <form> so it will trigger whenever there's an "input" event. Have the event handler change the [max] attribute value of the range input to the [value] of the limit <input>.
const limit = e => {
const io = e.currentTarget.elements;
let max = io.limit.value;
io.range.max = max;
io.view.value = io.range.value;
};
const ui = document.forms.ui;
ui.oninput = limit;
input {
display: inline-block;
width: 5ch;
text-align: right;
}
#range {
width: 20ch
}
<form id='ui'>
<input id='limit' type='number' max='100' value='100'>
<output id='view'>0</output><br>
<input id='range' type='range' min='0' max='100' value='0'>
</form>

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

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

Categories