JQuery UI: smooth one-click slider (default)?

I would like to make a slider that snaps to the center, while maintaining a smooth action elsewhere. Something like the jQuery version of a real speaker balance speaker. Is it possible?

Or should I just create my own slider with a draggable object, compressed by one axis with its frame, snapped to another object (or grid) located in the center of the frame?

Edit: I just need a slider that allows values, for example. from -10 to -1, 0 and from 1 to 10 (between -1 and 1 binding to 0) in increments of: 0.1

+5
source share
3 answers

jQuery, slide event:

jSlider.slider({
    // other options...
    slide: function (event, ui) {
        if (ui.value > -1 && ui.value < 1 && ui.value != 0) {
            // force it to 0 between -1 and 1.
            jSlider.slider('value', 0); 
            return false;
        }
        return true;
    }
});
+4

... , ... , , (, ), , . ?

EDIT: :

jQuery-. :

  • Mousedown ( ). api.jquery.com/mousedown/. .

  • , . docs.jquery.com/Tutorials:Mouse_Position

  • , . api.jquery.com/animate/ .

  • , "" , .

0

, jquery . , -. , (, 5-10), , = 1, . max-min (, 1-1000 ), 1.

       max_limit = 30;
       min_limit = 5;
       stick_to_steps_of = 5;
       var computed_step = max_term/100; //you can vary the denominator to make it smoother
        $("#my_slider" ).slider({
            animate : true,
            value: max_limit,
            min: min_limit,
            max: max_limit,
            step: computed_step,
            stop: function( event, ui ) {
                d = parseInt(parseInt(ui.value)/stick_to_steps_of);
                rem = parseInt(ui.value)%stick_to_steps_of;
                var fval = 0;
                if (rem <= parseInt(stick_to_steps_of/2)) {
                    fval = d*stick_to_steps_of;
                }else{
                    fval = (d+1)*stick_to_steps_of; 
                }
                $("#my_slider").slider('option', 'value', fval); 
                $('#myslider_current_value').html(fval);  //some placeholder to show the current value
            }
        });
-2

All Articles