Popup with value of slider when it's changed

Question

I have the next jsfiddle:

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

There is a slider with an ellipse that contains arrows.

I want to write a function that shows a popup with the value of the ellipse when the user changes the value.

BUT: There are two options to scroll it:

1) When you click on a certain value, a popup with the value will be shown on the screen.

2) When you click on the ellipse and move it to the left or right, and then stop clicking on the ellipse (in other words, stop scrolling it), a popup with the value will be shown on the screen with the 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);            
    }
});

Any help appreciated!

Answer 1

You want to bind to the stop event. It will fire when the user stops dragging or when the click at a different point on the slider.

This is your updated code:

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

Working Fiddle: https://jsfiddle.net/vxz7fnvk/3/