javascript - 更改时弹出 slider 的值

Question

我有下一个 jsfiddle:

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

有一个带有包含箭头的椭圆的 slider 。

我想编写一个函数，在用户更改值时显示带有椭圆值的弹出窗口。

但是:有两个选项可以滚动它:

1) 当您点击某个值时，屏幕上会显示一个带有该值的弹出窗口。

2) 当您单击椭圆并将其向左或向右移动，然后停止单击椭圆(换句话说，停止滚动)时，屏幕上将显示一个带有值的弹出窗口值(value)。

$("#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

您想绑定(bind)到 stop事件。当用户停止拖动或在 slider 上的不同点单击时，它将触发。

这是您更新后的代码:

$("#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);
    }
});

工作 fiddle :https://jsfiddle.net/vxz7fnvk/3/