Value change of range slider when drop-down tab changed

Question

I am trying to figure out how to change the value of a range slider when a drop-down unit menu is changed. For example, the slider is currently set to min -29, max 43, and step size 18 for "metric" drop-down. Thus, the range slider value is: -29, -11, 7, 25, 43. When the drop-down is changed to "imperial", I would like the range slider value to change to: -20, 12, 45, 77, 110. How can I program this in JavaScript? I would like to avoid using jQuery, since I have not been able to figure that out yet. Thank you in advance for your help.

<table style="margin-left: auto; margin-right: auto;width:75%;">
 <tr>
  <td style="text-align:right;width:40%;">
   <label for="unittype"><b>Units:</b></label>
  </td>
  <td style= "text-align:left;">
   <select id="unitselected" style="width:40%;" onChange="getunitType()">
    <option value="metric">Metric</option>
    <option value="imperial">Imperial</option>
   </select>
  </td>
</tr>
</table>

<label  id="tempunitresult" for"temp"><b>Temperature (&#8451;):</b></label>
 <br>
<input type="range" id="tempselected" class="slider" min="-29" step="18" max="43" oninput="rangeValueTemp.innerText=this.value">
<div style="text-align:center;" id="rangeValueTemp">7</div>

<script>
var unit_type = new Array();
  unit_type["metric"]=0;
  unit_type["imperial"]=1;

function getunitType(){
  var unitType = 0;
  var unitSelected = document.getElementById('unitselected');

  unitType = unit_type[unitSelected.value];

  if (unitType == 0){

    var tempValue = document.getElementById("tempselected");
    tempValue.setAttribute('min',-29);
    tempValue.setAttribute('max',43);
    tempValue.setAttribute('step',18);

  }else{

    var tempValue = document.getElementById("tempselected");
    tempValue.setAttribute('min',-20);
    tempValue.setAttribute('max',110);
}

</script>

Answer 1

Not sure... but actually when changing units from metric (Celsius) to imperial (Fahrenheit) the range should stay the same.

So min/max
-29/43 °Celsius
should have an exact (convertible) equivalent of:
-20.2/109.4 °Fahrenheit

Otherwise you'll encountering conversion issues when switching units.

Example

 let unitSelected = document.getElementById('unitselected'); let tempValue = document.getElementById("tempselected"); let rangeValueTemp = document.getElementById("rangeValueTemp"); let tempUnitString = document.getElementById("tempUnitString"); let tempUnitStringCurrent = document.getElementById("tempUnitStringCurrent"); // metric values let minCelsius = -29; let maxCelsius = 43; let stepsCelsius = 1; let initialValue = 7; // imperial values let minFahrenheit = minCelsius * 9 / 5 + 32; let maxFahrenheit = maxCelsius * 9 / 5 + 32; let stepsFahrenheit = 0.1; //default values let unitString = '°Celsius'; tempUnitString.textContent = unitString; tempUnitStringCurrent.textContent = unitString; tempselected.setAttribute('min', minCelsius); tempselected.setAttribute('max', maxCelsius); tempselected.setAttribute('step', stepsCelsius); tempselected.value = initialValue; let unitType = +unitselected.value; let currentTemp = +tempselected.value; rangeValueTemp.textContent = currentTemp; //update temperature values tempValue.addEventListener('change', function(e) { currentTemp = +e.currentTarget.value; rangeValueTemp.textContent = currentTemp; }) //update temperature units unitSelected.addEventListener('change', function(e) { currentTemp = +tempselected.value; unitType = e.currentTarget.value; if (unitType == 'imperial') { unitString = '°Fahrenheit'; currentTemp = currentTemp * 9 / 5 + 32; tempValue.setAttribute('step', stepsFahrenheit); tempValue.setAttribute('min', minFahrenheit); tempValue.setAttribute('max', maxFahrenheit); } else { unitString = '°Celsius'; currentTemp = (currentTemp - 32) * 5 / 9; tempValue.setAttribute('min', minCelsius); tempValue.setAttribute('max', maxCelsius); tempValue.setAttribute('step', stepsCelsius); } currentTemp = +currentTemp.toFixed(3); rangeValueTemp.textContent = currentTemp; tempUnitString.textContent = unitString; tempUnitStringCurrent.textContent = unitString; tempselected.value = currentTemp; });

 input, select { display: block; width: 100%; } label { font-weight: bold; display: block; }

 <p> <label id="tempunitresult" for "temp"> Temperature (<span id="tempUnitString"></span>): </label> <input type="range" id="tempselected" class="slider"> </p> <p> <label for="unittype">Units:</label> <select id="unitselected"> <option value="metric">Metric (Celsius)</option> <option value="imperial">Imperial (Fahrenheit)</option> </select> </p> <p><span id="rangeValueTemp">0</span>&thinsp;<span id="tempUnitStringCurrent"></span></p>