Question

After years using STOFLW, for first time i havent found the answer on a first sight. So, lets go:

I have a jquery UI slider range, lets say from -5 to 5. I want to set the second handler maximun to 0 after the first one is moved to a positive value (actually the first handler is already forced to select only positive values).

Another way to ask the question is "Can I force one of the handlers to select only psoitive values and the other only negative ones"

Regards and BTW, thousand of thanks to everyone here, you saved me tons of minuts.

Was it helpful?

Solution 2

Solution found, i've edited the post and made a jsFiddle here: http://jsfiddle.net/santirisco/mPNsC/3/

$( ".slider-form").slider({
            values: [0,0],
            min: -5,
            max: 5,
            step:.5,
            animate: true,
            create: function(event, ui) {
        //On Create create an array to store the values of each handler
                hndlrpos=[];
            },
            stop: function( event, ui ) {
        //On Stop store the values of each handler
                for (i=0; i<=$('.ui-slider-handle').length; i++){
                    hndlrpos[i]=ui.values[i]
                }
            },
            slide: function( event, ui ) {
        //ON Slide return false if we are overpasing the limits, 
        //this part shuold be improved but by now it's working
                if( (hndlrpos[0]!== undefined && hndlrpos[0]>0&&(ui.values[1])>0)
                    ||
                    (hndlrpos[0]!== undefined && hndlrpos[0]<0&&(ui.values[1])<0)
                    ||
                    (hndlrpos[1]!== undefined && hndlrpos[1]>0&&(ui.values[0])>0)
                    ||
                    (hndlrpos[1]!== undefined && hndlrpos[1]<0&&(ui.values[0])<0))
                {
                    return false;
                }
            }

        });

OTHER TIPS

The documents say min: 300, max: 2500, step: 100, value: 500,

My example I use for my own.

$("#slider-impulseH").slider({
orientation: "hortizonal",
range: "min",
min: 300,
max: 2500,
step: 100,
value: 500,
slide: function( event, ui ) {
    $( "#engineI" ).text( ui.value );
    }
change: function( event, ui ) {
 $( "#engineI" ).text( ui.value );
 }
});

Documents for max in a slider slider.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top