CODEWITHSUNDEEP
jqueryslider
Michael Zelensky
Michael Zelensky

Reputation: 2132

Jquery Slider: make part of it available?

I've got a jquery slider for selecting a deposit term (in a bank). For the most of the deposit types term range is 1-36 months, but for one of them - only 1-12.

I want to keep the interface uniform (36 months slider) but make unavailable term unselectable (it shouldn't be possible to slide to higher values than 12). As a result, the slider should have max=36, but you can slide to maximum value = 12.

Is it possible in any way? Simple or tricky - doesn't matter, but the simplier is of course the better.

Thanks!

Upvotes: 2

Views: 125

Answers (2)

Clyde Lobo
Clyde Lobo

Reputation: 9174

Try

$( ".selector" ).slider({
    min: 1,
    max: 36,
    value: 12,
    slide: function(event, ui) {
       if(ui.value > 12)
           return false;
       $value.text(ui.value);
    }
});

It wont allow the slider to go ahead of 12.

Demo at http://jsfiddle.net/3QVUf/160/

Upvotes: 2

ShaunOReilly
ShaunOReilly

Reputation: 2206

Just change the text from 13 - 36 to be a slightly dimmer color, to make it look like it is disabled, and then use the jump back method ass suggested.

I did try the Snap it back method. http://jsfiddle.net/webwarrior/aLJQm/52/

The Slider snaps back, but the reported value is still higher than 12.

Only need to do the numbering bit now...

Upvotes: 0

Related Questions