滑块（范围）触发哪个事件可以正常工作？

我有以下输入，这是我转换成滑块：滑块（范围）触发哪个事件可以正常工作？

<div id="slidecontainer"> 
     <input #ranger type="range" min="{{minInterval}}" max="{{maxInterval}}" step="100" [(ngModel)]="interval" 
     (click)="onStart()" class="slider"> 
    </div>

（点击）似乎是错误的角度事件。只要拖动它并放开它，而鼠标指针没有悬停在滑块上，则onStart()将不会执行。

我尝试了其他事件，如（dragexit），（mouseup）或其他，但没有任何工作。当我拖动此滑块时，无论鼠标位于何处，它都应该执行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;

来源

2017-10-06 codepleb

（mousedown）=“onStart（）”？ –

你应该听使用内置更改事件如下所示更改：

(change)="onStart(ranger.value)"

因此，您的输入应如下所示：

<input #ranger type="range" min="{{minInterval}}" max="{{maxInterval}}" step="100" [(ngModel)]="interval" 
     (change)="onStart(ranger.value)" class="slider">

来源

2017-10-06 22:16:32

甜，我认为“改变”会在变量发生变化时执行，而不仅仅是当你放开滑块时。我有一个代表滑块值的标签。那个在飞行中改变，而（改变）只在“mouseup”（基本上）上发射。谢谢！ – codepleb

嗨，只是一个侧面说明。当然，我们在这里删除了所有的称呼，所以请不要将它们添加到您的帖子中。在_Meta_上有许多关于此指南的参考，但主要的是[这是一个]（https://meta.stackoverflow.com/q/260776/472495）。 – halfer

尝试使用onChange或ng-change。只要滑块的值发生改变，它们就会触发，所以即使鼠标从滑块移动，事件也会激活。

希望可以帮到

来源

2017-10-06 22:38:08 Michael

滑块（范围）触发哪个事件可以正常工作？

回答

相关问题