Search code examples
javascriptjqueryjquery-uijquery-ui-slider

Make jQuery UI Slider clickable not draggable


I'm using jQuery UI 1.10.3. I'm looking to make an instance of the slider widget non-draggable. I want the user to be able to click to values along the slider only.

I have tried eventDefault on the slider's start method.. That didn't work (unresponsive slider). http://jsfiddle.net/3hTUz/


Solution

  • $("#slider").slider({
                value:100,
                min: 0,
                max: 500,
                step: 50
    }).on({
        slide: function(e,ui) {
            $(this).data('v', ui.value);
            e.preventDefault();
        },
        mousedown: function() {
            var that = this;
            setTimeout(function() {
                var v = $(that).data('v');
                $(that).slider('value', v);
            },2);
        }
    });
    
    $( "#slider-value" ).html(  $('#slider').slider('value') );
    

    FIDDLE