Question

I want to create a slider that has a rating system that looks like the one in the image (colours don’t need to match, just the numbers).

I know I should use the

$("#slider").slider();

bit, like shown here: http://docs.jquery.com/UI/Slider, but I don’t really understand how to build a min (0,5 or 1), max (10) and steps (0,5 or 1) in it. Also, after that, I have a button

<a href="#linkToOtherPage" data-direction="reverse" data-role="button" data-theme="b">Save</a> 

And when it is clicked, I want it to show an alert that the selected rating is saved.
Anyone know how to do it?

edit

Just discovered that jquery-mobile handles the sliders in another way. And I’m using jQuery-mobile in this case.

Answer 1

Found out I needed to use the jQuery-mobile slider function. Used this now:

        <input type="range" name="slider-mini" id="slider-mini" value="5" min="1" max="10" data-highlight="true" data-mini="true" />
        <script>
          function saveSlider() {
            var value = $( "#slider-mini" ).val();
            alert ("You have selected the value: " + value);
          }

        </script>

It has steps of instead of 0,5, but that’s ok for now.