Interactive jQuery UI Slider Example

Move the slider around and check out the values

View Source

$(function(){
	var slide_int = null;

	function update_slider(){
		var offset = $('.ui-slider-handle').offset();
		var value = $('#slider').slider('option', 'value');
		$('#current_value').text('Value is '+value).animate({top:offset.top }, 1000 )
		$('#current_value').fadeIn();
	}

	$('#slider').slider({
		animate: true,
		step: 1,
		min: 1,
		orientation: 'vertical',
		max: 10,
		start: function(event, ui){
		$('#current_value').empty();
			slide_int = setInterval(update_slider, 10);	
		},
		slide: function(event, ui){
			setTimeout(update_slider, 10);  
		},
		stop: function(event, ui){
			clearInterval(slide_int);
			slide_int = null;
		}
	});	
});