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/

。希望幫助。祝你好運！