jQuery UI Slider - Location Radius

by Alvin Olavarrieta

HTML

<p style="padding:30px 0 0 50px;">
  <label for="amount">Select a location radius:</label>
</p>

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

CSS

/* Slider*/
#slider{
    width: 280px;
    display: inline-block;
    margin-left:50px;
}
#slider label {
    color: #05536a;
    font-weight: bold;
    font-size:10px;
    position: absolute;
    width: 55px;
    margin-left: -25px;
    text-align: center;
    margin-top: 25px;
}

JavaScript

$(function () {
    
    //Begin slider
    $( "#slider" ).slider({
        value: 4,
        min: 1,
        max: 5,
        step: 1
    }).each(function() {
        
        // Get the options for this slider
        var opt = $(this).data().uiSlider.options;
        
        // Get the number of possible values
        var vals = opt.max - opt.min;
        
        var labels = ['5 mil.','10 mil.','15 mil.','25 mil.','50 mil.'];
        
        $.each(labels, function(index, value){
            var element = $('<label>'+value+'</label>').css('left',(index/vals*100)+'%');
            $( "#slider" ).append(element);
            
        });
    });
    
    
});//end doc ready