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

Question

Please help me with this jquery-ui-slider! The time value in the tooltip is created with the initial time values; the value changes through the way moving with the mouse from A to B; at B before mouse goes up, the value differs to the value that shows afterwards; with other words the script generates two values during sliding and stopping and when mouse goes up; the moved position B value differs slightly from the position B end value after mouse up;

a possible solution: replace .slider("values", 0)... with ui.values[0] jQuery UI Slider - Value returned from 'slide' event on release is different from 'change' value

is it a solution and how can we do this for this slider? have someone an idea? please help!

//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);
   }
 });
});

grdevphl · Answer 1 · 2015-07-13T16:20:39.950

You can use ui.values[0] to set the slider, but you need to use .slider("values", 0) to set when creating the control because ui.values is undefined. I made a simple fiddle to demonstrate it working this way. I added a check to the valtooltip function so that if ui.values is undefined, it will set the value using the .slider("values, way:

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

Here's the fiddle, so you can try it out: https://jsfiddle.net/e6oa09kg/1/

Hope that helps. Best of luck!

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

1 Answers1