JQuery UI Slider

Sample code for a JQuery UI slider

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<h1>HTML Slider Test</h1>

<div id="slider"></div>
<p>Your slider has a value of <span id="slider-value"></span>
</p>
<button id="add">+</button>

CSS

h1 {
    font-family: Helvetica, Arial;
    font-weight: bold;
    font-size: 18px;
}
body, p {
    font-family: Helvetica, Arial;
}

JavaScript

$(function () {
    var values = [0, 12, 47, 100, 244, 570];
    var slider = $("#slider").slider({
        min: 1,
        max: 750,
        slide: function (event, ui) {
            slider.slider('option', 'value', findNearest(ui.value));
            $('#slider-value').html(ui.value);
            return false;
        }
    });

    function findNearest(value) {
        var nearest = null;
        var diff = null;
        for (var i = 0; i < values.length; i++) {
            var newDiff = Math.abs(value - values[i]);
            if (diff == null || newDiff < diff) {
                nearest = values[i];
                diff = newDiff;
            }
        }
        return nearest;
    }
    $('#add').on('click', function(){
    	$("#slider").slider('option', 'value', '20');
   	  $("#slider").slider('refresh');
    });
});