Skip to content

Instantly share code, notes, and snippets.

@thiyagaraj
Created February 4, 2014 14:38
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save thiyagaraj/8804699 to your computer and use it in GitHub Desktop.
Save thiyagaraj/8804699 to your computer and use it in GitHub Desktop.
jQuery UI slider, custom step or snap points
//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> */
@thiyagaraj
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment