javascript - ui slider 显示鼠标抬起之前和之后移动值之间的差异

Question

请帮我解决这个 jquery-ui-slider! 工具提示中的时间值是使用初始时间值创建的；鼠标从A移动到B的过程中，数值发生变化；鼠标抬起前B处的值与鼠标抬起后显示的值不同；换句话说，脚本在滑动和停止以及鼠标抬起时生成两个值；移动后的位置B值与鼠标松开后的位置B结束值略有不同；

可能的解决方案: 将 .slider("values", 0)... 替换为 ui.values[0] jQuery UI Slider - Value returned from 'slide' event on release is different from 'change' value

这是一个解决方案吗？我们如何为这个 slider 做到这一点？ 有人有主意吗？请帮忙!

//jquery ui slider with two tooltips shows seconds

$(function() {
 var initialTime1 = 28800;
 var initialTime2 = 57600;

//object with html-tooltip and value in seconds

var valtooltip = function(sliderObj, ui){
val1 = '<span class="slider-tip">'+sliderObj.slider("values", 0) + '</span>';
val2 = '<span class="slider-tip">'+sliderObj.slider("values", 1) + '</span>';
sliderObj.find('.ui-slider-handle:first').html(val1);
sliderObj.find('.ui-slider-handle:last').html(val2);                   
};

$("#slider_time").slider({
   min: 0,
   max: 86400,
   step: 300, // 300s steps
   values: [initialTime1, initialTime2], 
   range: true, // two sides
   create: function(event,ui){
            valtooltip($(this),ui);
   },
   slide: function(event,ui){
            valtooltip($(this),ui);
        // values for hidden inputs
        for (var i = 0; i < ui.values.length; ++i) {
        //values for tooltip 0 and 1
        $(".sliderValue[data-index=" + i + "]").val( ui.values[i]);
        //values for value in hidden inputs 
        $(".sliderValue[data-index=" + i + "]").attr('value', ui.values[i]);
        }
   }, 
   stop: function(event,ui){
           valtooltip($(this),ui);
   }
 });
});

Answer 1

您可以使用ui.values[0]设置 slider ，但需要使用.slider("values", 0)创建控件时设置，因为 ui.values 未定义。我做了一个简单的 fiddle 来演示它的工作方式。我向 valtooltip 函数添加了一个检查，以便 if ui.values未定义，它将使用 .slider("values, 设置值方式:

var valtooltip = function(sliderObj, ui){
    // if this is initializing, ui.values will be undefined, so set with slider values
    var sliderValue1 = (ui.values === undefined) ? sliderObj.slider("values", 0) : ui.values[0];
    var sliderValue2 = (ui.values === undefined) ? sliderObj.slider("values", 1) : ui.values[1];
    var val1 = '<span class="slider-tip">'+ sliderValue1 + '</span>';
    var val2 = '<span class="slider-tip">'+ sliderValue2 + '</span>';
    sliderObj.find('.ui-slider-handle:first').html(val1);
    sliderObj.find('.ui-slider-handle:last').html(val2);                   
};

这是 fiddle ，你可以尝试一下:https://jsfiddle.net/e6oa09kg/1/

希望有帮助。祝你好运!