LearnFast.Ninja

jQuery UI slider custom values

Custom values in jQuery slider. In this tutorial we create JavaScript array with values for the slider. Then we define the min attribute to 0 and the max will be the array length - 1. In the slide event we take the array value at the ui.value position.

Main idea:

var Slider_Values = [1, 10, 20, 30, 40, 50, 60, 100, 200, 300, 400, 500];

 

$(function () {

    $("#Slider_Data").slider({

        min: 0,

        max: Slider_Values.length - 1,

        step: 1,

        slide: function (event, ui) {

            $('#Slider_Result').text(Slider_Values[ui.value]);

        }

    });

});


Result:


Note: You must have the jQuery UI.

Tags

jquery

slider