1

只是想用 jquery 制作一个漂亮的滑块，滑块很高兴地改变了输入 - 但我希望用户能够输入一个数字，并且在他们停止输入后，滑块会在短暂的停顿后移动到该值......滑块确实那个（当前在提交值之后）-但输入没有移动-它被延迟并移动到“旧”位置

这里的例子：http: //free-cursor.org/dev/slider.php

    $(function(){           
        $('#slider_x').slider({
            animate: true,
            step: 1,
            min: 300,
            orientation: 'horizontal',
            max: 1000,
            start: function(event, ui){
                $('input[id=current_value_x]').empty();
                slide_int_x = setInterval(update_slider, 10);   
            },
            slide: function(event, ui){
                setTimeout(update_slider, 10);  
            },
            stop: function(event, ui){
                clearInterval(slide_int_x);
                slide_int_x = null;
            }
        }); 

    });
    function update_slider(){
        var offset = $('.ui-slider-handle').offset();
        var value = $('#slider_x').slider('option', 'value');
        $('input[id=current_value_x]').val(value).css({left:offset.left });
        $('input[id=current_value_x]').fadeIn();
    }
    function update_slider_y(){
        var offset = $('.ui-slider-handle').offset();
        var value = $('#slider_y').slider('option', 'value');
        $('input[id=current_value_y]').val(value).css({left:offset.left });
        $('input[id=current_value_y]').fadeIn();
    }
4

1 回答 1

1

检查这将解决您的问题，

http://jsfiddle.net/Yn883/2/

您必须等待滑块位置左侧的“ui-slider-handle”值更新。所以我使用了 setTimeout 函数。

$('input[id=current_value_x]').change(function () {
                var value = this.value;

                $("#slider_x").slider("value", value);
                // now move the input 
                setTimeout(function(){update_slider()},500);
            });

function update_slider(){
        var position = $('.ui-slider-handle').position();
        var value = $('#slider_x').slider('option', 'value');
        $('input[id=current_value_x]').val(value).css({left:position.left });
        $('input[id=current_value_x]').fadeIn();
    }
于 2013-11-10T19:57:35.687 回答