Skip to content

Instantly share code, notes, and snippets.

@thiyagaraj

thiyagaraj/jquery.slider.custom.step.js

Created February 4, 2014 14:38
Show Gist options
  • Save thiyagaraj/8804699 to your computer and use it in GitHub Desktop.
Save thiyagaraj/8804699 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. thiyagaraj created this gist Feb 4, 2014.
    22 changes: 22 additions & 0 deletions jquery.slider.custom.step.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@


    //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> */