0
200
Vistas¿Cómo cambiar el valor de entrada según los números personalizados en JavaScript?
Quiero cambiar el valor del rango según el valor personalizado dado en la captura de pantalla. En este momento obtengo 1,2,3,4,5,6 valores en el cambio de rango pero necesito 6,12,24,36,48,60 valores. ¿Cómo puedo hacer esto?
Mi código:
<div class="slidecontainer"> <input type="range"min="1" max="6" steps="1" value="1" id="myRange"> <p>Value: <span id="demo"></span></p> </div> <script> var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; } </script>¡Gracias por tus esfuerzos!
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Puede tomar una matriz y almacenar los valores que necesita en su control deslizante.
<div class="slidecontainer"> <input type="range"min="0" max="5" steps="1" value="0" id="myRange"> <p>Value: <span id="demo"></span></p> </div> <script> var values = ["6 mo","12 mo","24 mo","36 mo","48 mo","60 mo"]; var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); slider.oninput = function(){ output.innerHTML = values[this.value]; }; slider.oninput(); </script>
·
Juan Pablo Isaza
Denunciar
0
El siguiente fragmento resuelve su problema
Cambiando this.value para establecer valores en una matriz
<div class="slidecontainer"> <input type="range"min="1" max="6" steps="1" value="1" id="myRange"> <p>Value: <span id="demo"></span></p> </div> <script> values = [6,12,24,36,48,60]; var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = values[this.value-1]; } </script>
·
Juan Pablo Isaza
Denunciar
0
Si tiene un rango fijo, puede usar este método.
<div class="slidecontainer"> <input type="range"min="1" max="6" steps="1" value="1" id="myRange"> <p>Value: <span id="demo"></span></p> </div> <script> var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = slider.value === "1" ? '6 mo' : slider.value; function myFunction(pos) { const myMonths = [6, 12, 24, 36, 48, 60] return myMonths[pos - 1] + ' mo' } slider.oninput = function() { output.innerHTML = myFunction(this.value); } </script>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta