Question

试图用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();
    }

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

jquery滑块 - 在文本输入上移动滑块

1 个答案: