使用 javascript 将范围 0.5->1 转换为 output 范围 1>0

Question

I'm trying to make it so that when a range slider is increased from a starting (min) value of 0.5 and an end (max) value of 1 the converted output value decreases from a starting point of 1 (when the slider is at 0.5) and then decreasing to 0 (when the slider is at 1)

Here is what I have tried, currently the start output of the converted number is correct at 1 but when incresing the slider it is supposed to go down not up!

 updatefaderval(); function updatefaderval() { var rangeval = document.getElementById('fader').value; document.getElementById('faderval').innerText = rangeval; document.getElementById('convertedval').innerText = convert(rangeval); } function convert(inputval) { var aMin = 0.5; var aMax = 1; var bMin = 1; var bMax = 0; var aValue = inputval; var percentage = aValue / ( aMax - aMin ); var outputvalue = bMax - percentage * (bMax - bMin); console.log(percentage); return outputvalue; }

 <input id="fader" oninput="updatefaderval();" type="range" min="0.5" max="1" step="0.01" value="0.5" style="display:block"> Slider Actual Value: <span style="display:inine-block" id="faderval"></span><br /> Converted Value: <span style="display:inine-block" id="convertedval"></span>

As I set the bMin at 1 and the bMax at 0 i thought this would have the desiried output but alas not!

Answer 1

Here is the formula you could use:

 updatefaderval(); function updatefaderval() { var range = document.getElementById('fader'); document.getElementById('faderval').innerText = range.value; document.getElementById('convertedval').innerText = convert(+range.value, +range.min, +range.max, 1, 0); } function convert(inputval, srcStart, srcEnd, destStart, destEnd) { return destStart + (inputval - srcStart) * (destEnd - destStart) / (srcEnd - srcStart); }

 <input id="fader" oninput="updatefaderval();" type="range" min="0.5" max="1" step="0.01" value="0.5" style="display:block"> Slider Actual Value: <span id="faderval"></span><br> Converted Value: <span id="convertedval"></span>