[英]Popup with value of slider when it's changed
I have the next jsfiddle: 我有下一个jsfiddle:
https://jsfiddle.net/alonshmiel/vxz7fnvk/1/ 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. 1)当您单击某个值时,带有该值的弹出窗口将显示在屏幕上。
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. 2)单击椭圆并将其向左或向右移动,然后停止单击椭圆(换句话说,停止滚动)时,将在屏幕上显示带有该值的弹出窗口。
$("#slider").slider({
value:30,
min: 0,
max: 100,
step: 10,
slide: function( event, ui ) {
$( "#slider a" ).html("<span class='Triangles'>◀▶</span>");
$( "#slider-value" ).html(ui.value);
}
});
Any help appreciated! 任何帮助表示赞赏!
You want to bind to the stop
event. 您想绑定到stop
事件。 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'>◀▶</span>");
$("#slider-value").html(ui.value);
},
stop: function (event, ui) {
alert(ui.value);
}
});
Working Fiddle: https://jsfiddle.net/vxz7fnvk/3/ 工作小提琴: https : //jsfiddle.net/vxz7fnvk/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.