CODEWITHSUNDEEP
javascriptjqueryuser-interfaceslider
Mike
Mike

Reputation: 505

jQuery UI: smooth slider with one snap (to default value)?

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

Upvotes: 5

Views: 5477

Answers (3)

rane
rane

Reputation: 338

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 compute 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 computed_step calculation and initialize it to 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
            }
        });

Upvotes: -2

kevingessner
kevingessner

Reputation: 18985

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;
    }
});

Upvotes: 4

Calvin Froedge
Calvin Froedge

Reputation: 16373

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.com/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.com/Tutorials:Mouse_Position

  3. Use the animate function to move the slider while your mouse still hasn't been released api.jquery.com/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.

Upvotes: 0

Related Questions