[jQuery] Update input box with slider value
Hi,
This really should be simple, but I just can't get it to work. I just
want an HTML input box to show the value of a slider as the handle is
sliding. It can be done really easily with Scriptaculous (as is seen
in the demo here: http://www.aldenta.com/examples/script.aculo.us/slider-text-field.html)
but I'm using jquery in my site anyhow and would rather not use two
large javascript libraries if possible.
Anyhow, the script I have is as follows:
<script type="text/javascript">
var Slider1Value = 4;
var Slider1Stepping = 1;
var Slider1Min = 1;
var SliderMax = 10;
$(document).ready(function(){
$("#example").slider({
'stepping': Slider1Stepping,
'minValue': Slider1Min,
'maxValue': SliderMax,
'startValue': [Slider1Value],
'slide': function(coordx, coordy, x, y){
$('.slider-input').val(coordx);
}
});
});
</script>
<div id="example" class="ui-slider-1" style="margin:10px;">
<div class="ui-slider-handle"></div>
</div>
<input type="text" class="slider-input" />
Can anyone see why this isnt' working?
Thanks!