更改后带有滑块值的弹出窗口

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/