I have a problem with the slider bar from HTML5 using bootstrap css/js.

Especially the mobile view has a lot of control elements, so it requires scrolling up/down. This also works quite well. Unfortunately the slider bar triggers when scrolling so the slider changes value.

With buttons etc. this is easy with scrolling, if not clicked a button usually does not trigger.

Can this behavior also be implemented for slider bars? Otherwise, with each scroll operation with the finger, the slider accidentally assumes a new value.

This is the code for the Slider bar:

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

To catch changes I use this JavaScript:

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

I tried to disable touchdown events:

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

But the problem is that the value can't be changed anymore. I only want to allow 'click' similar 'touch' events, but no touchdown-hold events used for scrolling a page.

Has anyone an idea?