Question

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

可能的解决方案：用ui.values [0]替换.slider（“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-tooltip的对象和以秒为单位的值

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/

希望有所帮助。祝你好运！

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

1 个答案: