Popup со значением ползунка, когда он изменился

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); 
    } 
}); 

Рабочая Fiddle: https://jsfiddle.net/vxz7fnvk/3/