CODEWITHSUNDEEP
jquery
anatole
anatole

Reputation: 45

jquery slider - move slider on text input

just trying to make a nice slider with jquery the slider happily changes the input - but I'd like the user to be able to enter a number and the slider moves to that value a short pause after they stop typing... the slider does that (currently after committing the value)- but the input doesn't move - it's delayed and moves to the 'old' position

example here: 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();
    }

Upvotes: 1

Views: 1741

Answers (1)

Pradeep shyam
Pradeep shyam

Reputation: 1292

Check this will solve your problem,

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

You have to wait for the slider position left "ui-slider-handle" value to update. So i have used setTimeout function.

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

Upvotes: 1

Related Questions