ui滑块显示鼠标上升前后移动的值之间的差异

Question

请帮我用这个jquery-ui-slider！ 工具提示中的时间值是使用初始时间值创建的;通过鼠标从A移动到B的方式，数值发生变化;在鼠标上升前的B处，值与之后显示的值不同;换句话说，脚本在滑动和停止期间以及鼠标上升时生成两个值;鼠标移动后，移动后的位置B值与位置B的最终值略有不同;

一个可能的解决方案：更换 .slider（ “值”，0），......与ui.values [0] jQuery UI Slider - Value returned from 'slide' event on release is different from 'change' value

它是一个解决方案，以及我们如何能做到这一点为这个滑盖的？ 有人想法吗？请帮忙！

// jQuery UI的滑块有两个提示显示秒

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

//在秒的HTML工具提示和值对象

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("values", 0)来设置创建控件时的原因，因为ui.values未定义。我做了一个简单的小提琴来演示它如何工作。我添加了一个检查到valtooltip功能，这样如果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);     
}; 

这里的小提琴，所以你可以尝试一下：https://jsfiddle.net/e6oa09kg/1/

。希望帮助。祝你好运！