更改后帶有滑塊值的彈出窗口

Question

我有下一個jsfiddle：

https://jsfiddle.net/alonshmiel/vxz7fnvk/1/

有一個帶有橢圓的滑塊，其中包含箭頭。

我想編寫一個函數，當用戶更改值時顯示帶有橢圓值的彈出窗口。

但是：有兩個選項可以滾動它：

1）當您單擊某個值時，帶有該值的彈出窗口將顯示在屏幕上。

2）單擊橢圓並將其向左或向右移動，然后停止單擊橢圓（換句話說，停止滾動）時，將在屏幕上顯示帶有該值的彈出窗口。

$("#slider").slider({
    value:30,
    min: 0,
    max: 100,
    step: 10,
    slide: function( event, ui ) {
        $( "#slider a" ).html("<span class='Triangles'>&#9664;&#9654;</span>");
        $( "#slider-value" ).html(ui.value);            
    }
});

任何幫助表示贊賞！

Answer 1

您想綁定到stop事件。 當用戶停止拖動或在滑塊上的另一點單擊時，它將觸發。

這是您更新的代碼：

$("#slider").slider({
    value: 30,
    min: 0,
    max: 100,
    step: 10,
    slide: function (event, ui) {
        $("#slider a").html("<span class='Triangles'>&#9664;&#9654;</span>");
        $("#slider-value").html(ui.value);
    },
    stop: function (event, ui) {
        alert(ui.value);
    }
});

工作小提琴： https : //jsfiddle.net/vxz7fnvk/3/