JQuery UI - Slider

Question

I'm trying to use jQuery UI Slider. And what I want to do is: for each step in the slider I want to draw a point (.) in the slider bar. The point I want to put is a image I have.

Any suggestions?

Thank's for the help. Best regards.

Answer 1

You can do this by little 'trick'. You can set up a div like this:

#imgSlider {width:100px; background:url('path/to/img.gif') repeat-x top left;}

And then in slider's slide function, you can adjust width of that div:

// ... slider settings ....
slide: function (event, ui) {
    $('#imgSlider').width = ui.value;
}

By this way, you are revealing just a portion of that div and it creates a illusion of adding/removing individual images. If you need some kind of static background, then just wrap #imgSlider into another div and give it a background.

OR

You can do it in this way (which was my first idea):

1. Create a 'drawing' function, that will add or remove image to div (or any element).
2. Add an parameter to that function, which will decide if image sould be added or removed (simple boolean will do).
3. Use slider with option slide which accepts a function (as you can see at jQuery UI examples page).
4. In that slide function, do check if current value is lower or higher than new value. You will get true/false value (ie.: Is new slider value smaller or not?).
5. Call your 'drawing' function with parameter that you just got by comparing values - so it will now if it should add or remove that image.

You will then do some fine tuning like handling minimum and maximum value. But the logic should work.