How to Set Custom Step Values Dynamically in jQuery UI Slider

How to Set Custom Step Values Dynamically in jQuery UI Slider
In the following jQuery UI slider example, the user will be able to slide only the predefined steps and select only the predefined values. HTML Code: <div id="slider"></div> JavaScript Code: Use the following code to set custom snap points in the slider. // Valid amounts that can be selected in the slider var sliderAmountMap = [500, 750, 950, 1050, 1275, 1500]; $(function() { $("#slider").slider({ value: 3, //array index to set the default value, for example, 3 will set 1050 as the default value and it will be selected in the slider min: 0, //array index to set the minimum value in the slider max: sliderAmountMap.length-1, //the maximum value the slider will extend slide: function( event, ui ) { $("#amount_view").val("$"+sliderAmountMap[ui.value]); //map selected value with lookup array } }); $("#amount_view").val("$"+sliderAmountMap[$("#slider").slider("value")]); });

How to Set Custom Step Values Dynamically in jQuery UI Slider

In the following jQuery UI slider example, the user will be able to slide only the predefined steps and select only the predefined values.

HTML Code:

JavaScript Code:
Use the following code to set custom snap points in the slider.

// Valid amounts that can be selected in the slider var sliderAmountMap = [500, 750, 950, 1050, 1275, 1500]; $(function() { $("#slider").slider({ value: 3, //array index to set the default value, for example, 3 will set 1050 as the default value and it will be selected in the slider min: 0, //array index to set the minimum value in the slider max: sliderAmountMap.length-1, //the maximum value the slider will extend slide: function( event, ui ) { $("#amount_view").val("$"+sliderAmountMap[ui.value]); //map selected value with lookup array } }); $("#amount_view").val("$"+sliderAmountMap[$("#slider").slider("value")]); });