Search code examples
jqueryjslider

How to put indicators on the JQuery's JSlider?

I have a Jquery slider.

    <link href="jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css"/>
  <script src="jquery-1.7.1.min.js"></script>
  <script src="jquery-ui.min.js"></script>
<STYLE>
    #demo-frame > div.demo { padding: 1px !important; }
    </STYLE>

<SCRIPT>
    $(function() {
        $( "#glider" ).slider({step:10, animate:true, min:0, max:100, value:50});


    });
    </SCRIPT>   

<DIV class=demo>
<DIV id=glider></DIV></DIV>



This is the output of above JQuery slider code

How can I put notches on the steps for 10 values I want to put some notch on each step like on 0, 10, 20, 30 ....100. How can I do that?

Solution

  • It looks like the handle is styleed using a % left of the 

    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 10%;"></a>

    Of it's containing slider:

    <div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 10%;"></a></div>

    So I'm guessing perhaps if you can extract the slider points to work out the % and then style your marker notches using the same %'s.

    I'm afraid mine isn't the whole answer, as I'm unsure without digging into it how to get the slider points out as a percentage. Perhaps take a look at the unminified version of jquery-ui slider and see how the percentage is calculated?