我有以下输入,我将其转换为 slider :
<div id="slidecontainer">
<input #ranger type="range" min="{{minInterval}}" max="{{maxInterval}}" step="100" [(ngModel)]="interval"
(click)="onStart()" class="slider">
</div>
(click) 似乎是错误的 Angular 事件。每当拖动它并放开它时,当鼠标指针没有悬停在 slider 上时,onStart()
将不会被执行。
我尝试了其他事件,例如 (dragexit)、(mouseup) 或其他任何事件,但都没有用。当我拖动这个 slider 时,它会执行 onStart()
方法,无论鼠标在哪里。
这是我的 CSS(据我所知应该无关紧要):
#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 */
}
这些是我组件中的数字(在 HTML 文件中提到):
interval: number = 3000;
minInterval: number = 0;
maxInterval: number = 5000;
最佳答案
尝试使用 onChange 或 ng-change。只要 slider 的值发生变化,这些事件就会触发,因此即使鼠标从 slider 上移开,该事件也会激活。
希望对你有帮助
关于html - slider (范围)应该触发哪个事件才能正常工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46614576/