Switching images using jQuery Select Slider?

I thought this would be fairly trivial but I'm having problems...

Using the Jquery UI Slider I wanted to have a slider with "stage 1" through "stage 12". As you change the slider, I wanted an image to change based on the stage that was currently selected. I'm using the following code:

Script:

$('select#valueBB')
            .selectToUISlider({labels: 12})
            .change(

                function()
                {
                    $('#selectionImage').attr('src', 'images/SEM/' + $(this).val() + '.jpg');
                }
                );

        //fix color 
        fixToolTipColor();

HTML:

<img id="selectionImage" src="" width="500px" alt="">


        <label for="valueBB">Stage:</label>
        <select class = "Stage" name="valueBB" id="valueBB">
            <optgroup label="Stage">
                <option value="Stage1">Stage1</option>
                <option value="Stage2">Stage2</option>
                <option value="Stage3">Stage3</option>
                <option value="Stage4">Stage4</option>
                <option value="Stage5">Stage5</option>
                <option value="Stage6">Stage6</option>
                <option value="Stage7">Stage7</option>
                <option value="Stage8">Stage8</option>
                <option value="St开发者_StackOverflow社区age9">Stage9</option>
                <option value="Stage10">Stage10</option>
                <option value="Stage11">Stage11</option>
                <option value="Stage12">Stage12</option>
            </optgroup>
        </select>

The 12 images are named Stage1.jpg Stage2.jpg etc and are in the images/SEM/ folder. This works correctly if I select the stage from the drop-down box. But if I use the slider, the image doesn't change.

Thanks for any help!!

---

i bet that selectToUISlider has its own change function that you have to use in order to get ITs change events