下拉選項卡更改時范圍 slider 的值更改

Question

我試圖弄清楚當下拉單元菜單更改時如何更改范圍 slider 的值。 例如，slider 當前設置為“公制”下拉菜單的最小 -29、最大 43 和步長 18。 因此，范圍 slider 的值是：-29、-11、7、25、43。當下拉更改為“英制”時，我希望范圍 slider 的值更改為：-20、12、45， 77, 110. 如何在 JavaScript 中編程？ 我想避免使用 jQuery，因為我還沒有弄清楚。 預先感謝您的幫助。

<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

不確定......但實際上當將單位從公制（攝氏度）更改為英制（華氏度）時，范圍應該保持不變。

所以最小/最大
-29/43 °C
應該有一個精確的（可轉換的）等價物：
-20.2/109.4 °華氏度

否則在切換單位時會遇到轉換問題。

例子

 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>