0

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);
     }
 });
loriensleafs
  • 2,205
  • 9
  • 37
  • 71
  • take a look on this question, its about your same problem http://stackoverflow.com/questions/17245103/jquery-ui-slider-draggable btw the code from answer doesn't update the value properly but is a way to go – G.Mendes Dec 04 '13 at 16:20

1 Answers1

2

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/

Trevor
  • 16,080
  • 9
  • 52
  • 83
  • @loriensleafs Please mark my answer as accepted if it resolved your question or give feedback. Thanks – Trevor Dec 10 '13 at 16:53