Add ticks to Slider UI

Question

I'm fairly javascript and jquery. I'm trying to add a slider to my webpage. It's a basic slider where anyone can select a value between 0-100. I'm not sure how to mark SOME intervals in the middle.

This is the code i have so far

  <script>
    $(function() {
    var temp = 0;
        $( "#slider" ).slider({
            animate: true,
            value:temp,
            min: 0,
            max: 100,
            step: 1,
            slide: function( event, ui ) {
                $( "#amount" ).val(ui.value );
            },
            stop: function(event, ui) {          
                temp = ui.value;
                //Do something
            }
        });
        $( "#amount" ).val($( "#slider" ).slider( "value" ) );
    });
    </script>

It is functioning properly. What i wanna try to do is add interval markers at 0.25,50,75 and 100.

I have gone through a few questions on SO but not sure how to proceed with the implementation. Would appreciate the help.

I tried this implementation: http://jsbin.com/iwime but this is not what i am trying to do as i just want the ticks to appear at those regular intervals but users shold stll be able to select other values.

Thanks Cheers

score 0 · Answer 1 · answered Sep 24 '12 at 23:20

I am guessing you want something like this: http://jsbin.com/iwime/116

So, instead of using the number of ticks in the max option of slider, you use whatever max units you want to provide, e.g. 100. Then in refershTicks(), update the algorithm to toggle the class.

Slider settings:

    var slider = $("#slider").slider({
        ...
        max: 100,     // the only change
        ...
    });

And the refreshTicks() method:

    function refreshTicks() {
        var s = slider
            , lo = s.slider("values", 0), hi = s.slider("values", 1);
        var max = s.slider('option', 'max');
        s.find(".tick").each(function(i) {
            var i = (i + 1) * (max/ticks.length) - (max/ticks.length)/2;   // the updated algorithm
            var inRange = (i >= lo && i < hi);
            $(this)
                [(inRange ? 'add' : 'remove') + 'Class']("ui-widget-header")
                [(inRange ? 'remove' : 'add') + 'Class']("ui-widget-content");
        });
    }

Yes this is what i'm looking for but i do not want a range slider all i want is like a one directional slider. Like a volume control. — John, Oct 20 '12 at 01:41

score 0 · Answer 2 · edited May 23 '17 at 12:18

0

Similar to this SO Question : The answer from Bijan might help.

The implementation of jQuery UI slider he suggest may help you to find a solution: http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

edited May 23 '17 at 12:18

Community

1
1

answered Sep 26 '12 at 22:54

palmplam

707
9
20

Add ticks to Slider UI

2 Answers2