Estoy tratando de averiguar cómo cambiar el valor de un control deslizante de rango cuando se cambia un menú de unidad desplegable. Por ejemplo, el control deslizante está configurado actualmente en mínimo -29, máximo 43 y tamaño de paso 18 para el menú desplegable "métrica". Por lo tanto, el valor del control deslizante de rango es: -29, -11, 7, 25, 43. Cuando el menú desplegable se cambia a "imperial", me gustaría que el valor del control deslizante de rango cambie a: -20, 12, 45, 77, 110. ¿Cómo puedo programar esto en JavaScript? Me gustaría evitar usar jQuery, ya que aún no he podido resolverlo. Gracias de antemano por su ayuda.
<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 (℃):</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>No estoy seguro... pero en realidad, al cambiar las unidades de métricas (Celsius) a imperiales (Fahrenheit), el rango debería permanecer igual.
entonces mínimo/máximo
-29/43 °Celsius
debe tener un equivalente exacto (convertible) de:
-20,2/109,4 °Fahrenheit
De lo contrario, encontrará problemas de conversión al cambiar de unidad.
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 = 18; let initialValue = 7; // imperial values let minFahrenheit = minCelsius * 9 / 5 + 32; let maxFahrenheit = maxCelsius * 9 / 5 + 32; let stepsFahrenheit = 32.4; //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> <span id="tempUnitStringCurrent"></span></p>