After converting my input into a slider, I noticed a strange behavior with the (click) event in Angular. When dragging the slider and releasing it without the mouse pointer hovering over the slider, the onStart() method does not execute.
I experimented with other events like (dragexit) and (mouseup), but none of them produced the desired result. I want the onStart() method to execute whenever the slider is dragged, regardless of the mouse position.
Below is the CSS for the slider (which I believe is not causing the issue):
#slidecontainer {
width: 100%;
padding-bottom: 10px;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}
These are the values from my component mentioned in the HTML file:
interval: number = 3000;
minInterval: number = 0;
maxInterval: number = 5000;