Horje Website
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:

  1. <div id="slider"></div>

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

  1. // 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")]); });

November 23, 2022
Full Tutorials

This article was posted in Full Tutorials. Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

Leave a Reply

Your email address will not be published. Required fields are marked *


Horje © 2011 - 2023