Kind of a newby question, but I am not really. Just haven't used the HTML5 range slider much. Probably just some simple math that my brain currently is not triggering.
I have a range slider that goes from 0 - 100 and I am calculating the percentage so I can update the CSS opacity on some elements.
Anyways, I am doing an opacity update on elements on either side of the slider.
On the left side (0 value) I have the element on the left working with the range slider properly. It gets it calculation and properly adjusts its values. On the other side I would like the right side to do the opposite and when the range value is at 100.
I want the opacity of the element on the right to be 0 (CSS opacity: 0) when the range slider is at 100 and when the range slider is at 0, I want the element on the right to be 100% (or in CSS opacity:1.0).
My current code is as follows. I also have a JSFiddle.
AND yes I am still using jQuery so please spare the comments. Vanilla JS is fine to use as well. I appreciate the help.
var right = $('#rightElement');
var left = $('#leftElement');
var lastNum = 0;
$(slider).on('input', function() {
var v = $(this).val();
onInput(v);
});
function onInput(value) {
if (lastNum < value) {
var parsedValue = parseInt(value);
console.log("increasing");
$(left).css('opacity', (parsedValue / 100));
console.log("increasing percentage" + (parsedValue / 100));
}
if (lastNum > value) {
var parsedValue = parseInt(value);
console.log("decreasing");
$(left).css('opacity', (parsedValue / 100));
$(right).css('opacity', (parsedValue / 100));
console.log("decreasing percentage" + (parsedValue / 100));
}
lastNum = value;
console.log("onInput: " + value);
}.opacityElement {
width: 100px;
height: 100px;
display: inline-block
}
#rightElement {
background: red
}
#leftElement {
background: blue
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="leftElement" class="opacityElement"></div>
<div id="rightElement" class="opacityElement"></div>
<input type="range" min="0" max="100" value="50" id="slider">Thank you
Answered on this JSFiddle:
https://jsfiddle.net/5mf0bn1a/2/
Here's the key changes:
var parsedValue = parseInt(value);
if(lastNum < value) {
console.log("increasing");
console.log("increasing percentage" + (parsedValue/100));
}
if(lastNum > value) {
console.log("decreasing");
console.log( "decreasing percentage" + (parsedValue/100));
}
$(left).css('opacity', (parsedValue/100));
$(right).css('opacity', 1 - (parsedValue/100));
The easiest way to do this is to substract the value from 1 when you need to invert it
if value is 10, opacity value would be 0.10 (10/100) and the opposite is 0.9, thats 1 - 0.10 = 0.9
function onInput(value) {
var parsedValue = parseInt(value, 10);
$(left).css('opacity', (parsedValue/100));
$(right).css('opacity', (1 - (parsedValue)/100));
}
That will do the trick
To stay focused, the left div should follow the value on the slider but the right div should do the opposite thing.
To achieve this, you may use a simple trick to calculate the right div's opacity: opacity = 100 - the slider's value
After that we'll simply multiply the new value by 0.01 (or divide by 100) in order to contain it in the accepted range of values of the opacity attribute.
const slider = document.getElementById('slider'),
right = document.getElementById('rightElement'),
left = document.getElementById('leftElement'),
coeff = 0.01;
slider.addEventListener('input', () => {
const v = slider.value;
left.style.opacity = v * coeff;
right.style.opacity = (100 - v) * coeff;
});.opacityElement {
width: 100px;
height: 100px;
display: inline-block
}
#rightElement {
background: red
}
#leftElement {
background: blue
}<div id="leftElement" class="opacityElement"></div>
<div id="rightElement" class="opacityElement"></div>
<input type="range" min="0" max="100" value="50" id="slider">