jQueryUI 1.8.14 Autocomplete
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
<div id='slider-box'></div>
<br />
<div id="slider"></div>
<br />
<div id='location'></div>
CSS
#sliderValue {
position:absolute;
width: 50px;
}
#slider-box{
position:relative;
background-color: #669900;
left: 20px;
width: 20px;
height: 20px;
}
#slider{
width: 400px;
margin: 20px;
}
JavaScript
$(document).ready(function() {
$('#slider-box').animate({
left: 700
}, 3000);
$("#slider").slider({
min: 100,
max: 400,
step: 1,
range: 'min',
animation: true
});
setInterval(function(){
p = $("#slider-box");
var position = p.position();
$("#location").html('<p>' + position.left + '</p>');
//getter
var value = $( "#slider" ).slider( "option", "value" );
//setter
$( "#slider" ).slider( "option", "value", position.left );
}, 1);
});