javascript jQuery UI 滑块 - 发布时从“幻灯片”事件返回的值与“更改”值不同

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9121160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 05:40:15  来源:igfitidea点击:

jQuery UI Slider - Value returned from 'slide' event on release is different from 'change' value

javascriptjqueryjquery-uisliderjquery-ui-slider

提问by wyqydsyq

I have a jQuery UI slider:

我有一个 jQuery UI 滑块:

$('div.slider').slider({
    range: true,
    step: 250,
    min: 1000,
    max: 500000,
    values: [1000,500000],
    change: function(event, ui){
        console.log($(this).slider('values', 0)+','+$(this).slider('values', 1));
    },
    slide: function(event, ui){
        console.log($(this).slider('values', 0)+','+$(this).slider('values', 1));
    }
});

For some odd reason, when releasing the slider (mouseup) the value changes slightly from what it was. The slide event is returning something different than what the change event is. Anyone have any ideas what might be causing this and how I could solve it?

出于某种奇怪的原因,当释放滑块(鼠标向上)时,该值与原来的值略有不同。幻灯片事件返回的内容与更改事件不同。任何人都知道可能导致这种情况的原因以及我如何解决它?

I'm going to have a pretty intense operation in the callback for the change event (meaning I can't just use sldie), but also need to show the values of the slider live, so I can't use just one or the other.

我将在 change 事件的回调中进行非常密集的操作(意味着我不能只使用 sldie),但还需要实时显示滑块的值,所以我不能只使用一个或其他。

Here's a fiddle with this oddity in action: http://jsfiddle.net/5W6Zh/

这是一个在行动中处理这种奇怪现象的小提琴:http: //jsfiddle.net/5W6Zh/

Thanks in advance

提前致谢

回答by Dan Hixon

we ran into this tonight (and last night, and for the past few months). What we did to fix it was use ui.value and ui.values[0] instead of $("#slider").slider('values',0).

我们今晚(以及昨晚和过去几个月)遇到了这个问题。我们为修复它所做的是使用 ui.value 和 ui.values[0] 而不是 $("#slider").slider('values',0)。

Use this:

用这个:

change: function(event, ui) {
  $('.values').text(ui.values[0] + ',' + ui.values[1]);
}

Instead of:

代替:

change: function(event, ui) {
  $('.values').text($(this).slider('values', 0) + ',' + $(this).slider('values', 1));
}

I forked your jsfiddle and made it work: http://jsfiddle.net/danhixon/9JdhU/1/

我分叉了你的 jsfiddle 并使它工作:http: //jsfiddle.net/danhixon/9JdhU/1/

Honestly I don't think I would have found the solution without your question and jsfiddle - I kept comparing it to the jquery-ui demo until I found this difference.

老实说,如果没有您的问题和 jsfiddle,我认为我不会找到解决方案 - 我一直将它与 jquery-ui 演示进行比较,直到我发现这种差异。

回答by Eric

I found a solution! ALWAYS do this on a slide event:

我找到了解决办法!始终在幻灯片事件上执行此操作:

$(this).slider('value', ui.value);

And you're good to go

你可以走了

回答by ParhelicTriangle

Use ui.value in the slide handler to get a more accurate value.

在幻灯片处理程序中使用 ui.value 以获得更准确的值。

回答by cvk

Your min, max and step values look a bit weird, but I guess you just got them mixed up.

你的最小值、最大值和步长值看起来有点奇怪,但我猜你只是把它们搞混了。

I found that the slider doesn't work too well with steps much smaller than 1, so I changed to use integers only and divide afterwards. Never had any problems since then.

我发现滑块在步长远小于 1 时效果不佳,因此我改为仅使用整数,然后再进行除法。从那以后再也没有任何问题。