Tengo un problema con la barra deslizante de HTML5 usando bootstrap css/js.

Especialmente la vista móvil tiene muchos elementos de control, por lo que requiere desplazarse hacia arriba o hacia abajo. Esto también funciona bastante bien. Desafortunadamente, la barra deslizante se dispara cuando se desplaza, por lo que el control deslizante cambia de valor.

Con botones, etc., esto es fácil con el desplazamiento, si no se hace clic en un botón, generalmente no se activa.

¿Se puede implementar este comportamiento también para las barras deslizantes? De lo contrario, con cada operación de desplazamiento con el dedo, el control deslizante asume accidentalmente un nuevo valor.

Este es el código de la barra deslizante:

 <label for="customRange-1" class="form-label">[LABEL]</label> <input type="range" class="form-range" min="0" max="10" id="customrange-1">

Para detectar cambios, uso este JavaScript:

 $('input[type=range]').on('input', function () { // some actions )};

Traté de deshabilitar los eventos de touchdown:

 $('input[type=range]').on('touchdown', function (e) { e.preventDefault(); });

Pero el problema es que el valor ya no se puede cambiar. Solo quiero permitir 'hacer clic' en eventos similares a 'tocar', pero no usar eventos de retención de toque para desplazarse por una página .

¿Alguien tiene una idea?