0
168
ViewsCómo mover el texto con rango
Quiero crear un rango como el que ves en la siguiente imagen:
Aquí está mi código para esto:
<div class="form-group"> <label for="distance" class="form-label">Aranılan lokasyona uzaklık</label> <div class="distance"> <output>40 </output> <span>km uzaklık</span> </div> <input type="range" value="40" min="1" max="50" oninput="this.nextElementSibling.value = this.value" class="form-range" id="distance"> <div class="total-distance">50</div> </div>Entonces, lo que estoy tratando de lograr, quiero mover esto con la entrada de rango.
PD: estoy usando bootstrap para el rango.
2 answers
Answer question0
Si se usa la solución que desarrollé a continuación, es necesario desarrollar una función de transformación para evaluar la nueva posición del texto. La siguiente ecuación genera el valor del margin para la nueva posición de acuerdo con la cantidad de cambio. Por ejemplo;
T(x) = x * 4 + 60;Si no hay un método más fácil, la función de transformación también debería tomar el ancho de la página como entrada:
T(x, width) let output = document.getElementById('result'); let distance = document.getElementById('distance'); function changeValue(value){ output.innerHTML = `${50 - parseInt(value)}`; /* If this method is used, it is necessary to develop a transformation method. */ let result = parseInt(value) * 4 + 60; distance.style.marginLeft = `${result}px`; } changeValue(40); input{ margin-left: 100px; } #distance{ width: 200px; } <div class="form-group"> <label for="distance" class="form-label">Aranılan lokasyona uzaklık</label> <div id="distance"> <output id="result">40</output> <span> km uzaklık</span> </div> <input onchange="changeValue(this.value)" type="range" value="40" min="0" max="50" oninput="this.nextElementSibling.value = this.value" class="form-range" id="distance"> <div class="total-distance">Total: 50</div> </div>0
Buen viejo JS nativo... ¡qué brisa!
Primero, echa un vistazo al fragmento de código a continuación
Ahora, analicemos la solución
CSS : las propiedades de estilo permiten que la etiqueta en movimiento tenga su propio ancho y pueda moverse (según sea necesario)
JS : registre un evento (he usado el evento del mouse up , pero puede usar on change o cualquier otro que se adapte a sus requisitos). Luego, haga un cálculo simple: cuánto progreso hemos hecho, proyéctelo al tamaño de input real. Solo queda ajustar la nueva posición a tu etiqueta
Espero que esto te ayude a empezar
DISFRUTAR
function x(input) { const percent = input.value / 50 const position = percent * input.clientWidth const labelElement = document.querySelector('.distance') labelElement.style.left = `${position - labelElement.clientWidth / 2}px` } .distance { display: inline-block; position: relative; } <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-group"> <label for="distance" class="form-label">Aranılan lokasyona uzaklık</label> <br/> <div class="distance"> <output>40 </output> <span>km uzaklık</span> </div> <input onMouseUp=x(this) type="range" value="40" min="1" max="50" oninput="this.nextElementSibling.value = this.value" class="form-range" id="distance"> <div class="total-distance">50</div> </div>