Revisé la documentación de Bootstrap 4 para el control deslizante de rango y las respuestas aquí en SO, pero no puedo encontrar una manera de que el control deslizante muestre el valor cuando se mueve la pista.

enter image description here

Veo proyectos de código abierto como seiyria / bootstrap-sliderand que le permiten hacer eso, pero ¿realmente no hay una forma incorporada (parámetro de arranque) para mostrar valores cuando se mueve la pista?

0
Robert Sinclair 23 ene. 2021 a las 10:12

1 respuesta

La mejor respuesta

La respuesta es no, no hay una forma predeterminada.

Mi solución está a continuación. Después de analizar un montón de soluciones y darse cuenta de lo incosistentes que son en los navegadores, los dispositivos decidieron que es mejor mostrar la selección en tiempo real en un contenedor div.

Control deslizante HTML:

<div class="form-group mt-4 text-center">
<label for="price"><h4>Minimum price</h4></label>

<div class="price">500000</div>
<input type="range" class="custom-range" min="20000" max="1000000" step="10000" id="customRange3" name="Price" value="500000" style="width: 100%">

Esto generará en tiempo real el rango seleccionado actualmente dentro de un div contenido (requiere jquery)

<script>
$( document ).ready(function() {
    $('#customRange3').on('input', function(){
         v = $('#customRange3').val();
         console.log(v);
         $('div.price').text(v);
    });
});
</script>

Ahora, mientras desliza el rastreador hacia arriba y hacia abajo, se actualizará el número debajo de 'Resultado' ingrese la descripción de la imagen aquí

0
Robert Sinclair 25 ene. 2021 a las 21:01