Created
February 4, 2014 14:38
-
-
Save thiyagaraj/8804699 to your computer and use it in GitHub Desktop.
jQuery UI slider, custom step or snap points
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//This should have each valid amount that can be selected in the slider | |
var sliderAmountMap = [10000, 20000,30000, 40000, 45000,50000,65000]; | |
$(function() { | |
$( "#slider" ).slider({ | |
value: 4, //array index of onload selected default value on slider, for example, 45000 in same array will be selected as default on load | |
min: 0, //the values will be from 0 to array length-1 | |
max: sliderAmountMap.length-1, //the max length, slider will snap until this point in equal width increments | |
slide: function( event, ui ) { | |
$( "#amount" ).val( "$" + sliderAmountMap[ui.value] ); //map selected "value" with lookup array | |
} | |
}); | |
$( "#amount" ).val( "$" + sliderAmountMap[$( "#slider" ).slider( "value")] );//map selected "value" with lookup array | |
}); | |
/* html : <p> | |
<label for="amount">Donation amount ($50 increments):</label> | |
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> | |
</p> | |
<div id="slider"></div> */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
http://jsfiddle.net/3a2Tx/3/