UI滑块显示鼠标上移前后移动值的差异

ui slider shows difference between moved value before and after mouse goes up

本文关键字：移动 显示 鼠标 UI      更新时间：2023-09-26

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

一个可能的解决方案:替换。slider("values"， 0)…与ui.values [0]jQuery UI Slider - 'Event on release不同于'change'值

是一个解决方案，我们如何为这个滑动条做这个?有人有什么主意吗?请帮助!

//jquery UI slider with two tooltip显示秒

$(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);
   }
 });
});

您可以使用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/

希望有帮助。祝你好运!

相关文章：