滑塊（範圍）觸發哪個事件可以正常工作？

我有以下輸入，這是我轉換成滑塊：滑塊（範圍）觸發哪個事件可以正常工作？

<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

滑塊（範圍）觸發哪個事件可以正常工作？

回答

相關問題