I add a slider component to my page, I can move the slider handles, on mouseup-event the action is triggered - so far so good - but when i click next to the slider or even at a completely different place on the page, the mouseup-event is triggered again. I don't know where to look for or what to do.
The slider component is https://range-slider.toolcool.org/
I don't know if I should ask the slide developer for support or am I doing something wrong?
What I'm expecting? That the mouseup-event is only triggered when the slider handle is moved. Not on a click-event outside the slider.
jQuery.noConflict();
window.addEventListener('load', function() {
console.log('filters loaded');
const filters = new Filters();
filters.loadComponents();
}, false);
class Filters {
loadComponents() {
this.loadMySlider();
}
loadMySlider() {
const $mySlider = document.getElementById('slider');
if ($mySlider != null) {
if ($mySlider.classList.contains('range-slider-widget')) {
// listen to the change event
var sliderVal1 = 0;
var sliderVal2 = 0;
$mySlider.addEventListener('onMouseUp', (evt) => {
evt.preventDefault();
evt.stopPropagation();
console.log($mySlider.id);
jQuery('#min_val').val(Number(sliderVal1));
jQuery('#max_val').val(Number(sliderVal2));
this.submitFilters(1, true);
$mySlider.blur();
});
$mySlider.addEventListener('touchend', (evt) => {
evt.preventDefault();
jQuery('#min_val').val(Number(sliderVal1));
jQuery('#max_val').val(Number(sliderVal2));
this.submitFilters(1, true);
});
$mySlider.addEventListener('change', (evt) => {
evt.preventDefault();
sliderVal1 = evt.detail.value1;
sliderVal2 = evt.detail.value2;
});
}
} else {
console.log('is null');
}
}
submitFilters($id, $reload) {
console.log('submit filter');
}
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="field-checkbox">
<div class="input-wrapper range-slider">
<div class="filter-title">
<h4>Slider</h4>
</div>
<input type="hidden" name="min_val" class="form-control filter" id="min_val" value="1" data-min-val="1" />
<input type="hidden" name="max_val" class="form-control filter" id="max_val" value="100" data-max-val="100" />
<tc-range-slider id="slider" class="range-slider-widget" min="1" max="100" value1="1" value2="100" generate-labels="false" round="0" value1-label="#value-ca-1" value2-label="#value-ca-2" slider-height="0.9rem" slider-bg-fill="#f74331" slider-bg="#888888"
pointer1-shadow="none" pointer1-width="20px" pointer1-height="20px" pointer1-bg="#1568b9" pointer1-bg-hover="#1568b9" pointer1-bg-focus="#1568b9" pointer1-border="1px solid #1568b9" pointer1-border-hover="1px solid #1568b9" pointer1-border-focus="1px solid #1568b9"
pointer2-shadow="none" pointer2-width="20px" pointer2-height="20px" pointer2-bg="#1568b9" pointer2-bg-hover="#1568b9" pointer2-bg-focus="#1568b9" pointer2-border="1px solid #1568b9" pointer2-border-hover="1px solid #1568b9" pointer2-border-focus="1px solid #1568b9"
keyboard-disabled="true" mousewheel-disabled="true"></tc-range-slider>
<div class="row">
<div class="col">
<div id="value-ca-1"></div>
</div>
<div class="col text-end">
<div id="value-ca-2"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.4.slim.js" integrity="sha256-dWvV84T6BhzO4vG6gWhsWVKVoa4lVmLnpBOZh/CAHU4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/toolcool-range-slider/dist/plugins/tcrs-binding-labels.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/toolcool-range-slider/dist/toolcool-range-slider.min.js"></script>