Ui slider смена картинок при перемещении бегунка
 

Приветствую. Есть проблема, не могу додуматься, как сделать смену картинок при перемещии бегунка слайдера. Вот код слайдера:

<script>
$(function() {
$( "#slider-range-max" ).slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});
</script>

Собственно, как сделать, чтобы при перемещении бегунка на определенную позицию закрывалось одно изображение и открывалось другое?

$("#img1").hide("slow");
$("#img2").show("slow");

:write: Samovarov,
Вариант ...

$(function () {
    $("#slider-range-max").slider({
        range: "max",
        min: 1,
        max: 10,
        value: 2,
        slide: function (event, ui) {
            $("#amount").val(ui.value);
            $("[id^=img]").hide("slow");
            $("#img" + ui.value).show("slow");
         }
    });
    $("#amount").val(2);
    $("[id^=img]").hide();
    $("#img2").show();
});