CODEWITHSUNDEEP
jqueryjquery-uiuislider
loriensleafs
loriensleafs

Reputation: 2255

jquery ui slider animated snap to interval

Hey I have a jquery UI slider with three intervals it snaps to. The problem is when you drag you have to be more then have way between points before it snaps to the next point and if you didn't pull it far enough you would just think the slider didn't work. Is there a way to have the slider handle always move to where you slide it, but then snap to the closest interval? I haven't been able to figure out how to do this, this is what I have so far:

http://jsfiddle.net/vG8NY/16/

HTML:

<div id="variable_slider"></div>
<div id="slide">2</div>

JS:

$("#variable_slider").slider({
     value: 2,
     range: "min",
     min: 1,
     max: 3,
     step: 1,
     slide: function (event, ui) {
         slider_value = ui.value;
         $("#slide").html(slider_value);
     }
 });

Upvotes: 0

Views: 1354

Answers (1)

Trevor
Trevor

Reputation: 16116

Here is one option: 

$("#variable_slider").slider({
     value: 2,
     range: "min",
     min: 1,
     max: 3,
     step: .1,
     slide: function (event, ui) {
             slider_value = Math.round(ui.value);
             $("#slide").html(slider_value);
     },
     stop: function( event, ui ) {
         var val = Math.round(ui.value);
         $( "#variable_slider" ).slider( "value", val );
         $("#slide").html(val);
     }
 });

http://jsfiddle.net/vG8NY/17/

Upvotes: 2

Related Questions