# Solution 1 :

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

# Solution 2 :

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

``````

# Solution 3 :

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;

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

# Problem :

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

### Comment posted by ths

@ClosDesign you’re welcome!