I'd like to make a slider that snaps to the center while retaining smooth action elsewhere. Something like a jQuery version of a real-life speaker balance slider. Is it possible?

Or should I just create my own slider with a draggable object, constricted to one axis with containing it frame, snapping to another object (or grid) positioned in the center of the frame?

Edit: I simply need a slider that allows values e.g. from -10 to -1, 0, and 1 to 10 (between -1 and 1 snap to 0) with step: 0.1

I'd like to make a slider that snaps to the center while retaining smooth action elsewhere. Something like a jQuery version of a real-life speaker balance slider. Is it possible?

Or should I just create my own slider with a draggable object, constricted to one axis with containing it frame, snapping to another object (or grid) positioned in the center of the frame?

Edit: I simply need a slider that allows values e.g. from -10 to -1, 0, and 1 to 10 (between -1 and 1 snap to 0) with step: 0.1

• javascript
• jquery
• user-interface
• slider

Share Improve this question Follow edited Jan 27, 2011 at 9:57 Mike asked Jan 26, 2011 at 17:39 MikeMike 50555 silver badges1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You should be able to use the jQuery slider, but restrict its motion with the 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;
    }
});

Hmmm...so this is what I'm envisioning in my head...A background that slides on a timer like a carousel (maybe these are big images), with a row of thumbnails on top that slides smooth. That what you want to build?

EDIT: Here's what you need to do:

I rarely find the need to use jQuery plugins. Here is what you need:

1. Mousedown (on the slider). api.jquery./mousedown/. There is a callback on mouse down an on release.

2. Track mouse position inside the slider container while you're dragging the slider docs.jquery./Tutorials:Mouse_Position

3. Use the animate function to move the slider while your mouse still hasn't been released api.jquery./animate/ Stop animate on release.

4. When your slider gets to a certain x position in it's container, force the "smooth" function - ie a different animate function.

Use the following so that your jquery slider automatically snaps to the nearest in the step. The trick is to implement your own step-interval-slider. The problem is, if your max and min are separated by a small distance (for e.g. 5-10) your slide will behave in steps because the default step=1, so you need to pute your step based on that. If your max-min values are separated by a huge distance (e.g. 1-1000 or more) you can leave the puted_step calculation and initialize it to 1.

       max_limit = 30;
       min_limit = 5;
       stick_to_steps_of = 5;
       var puted_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: puted_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
            }
        });