jQuery UI - Slider

HTML

<label for="amount">note range:</label>
<input type="text" id="amount" />
<div id="slider-range-min"></div>









<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    Find documentation: <a href='http://jqueryui.com/slider/'>jQuery UI Slider Demo</a><br/>
    Find documentation: <a href='http://api.jqueryui.com/slider/'>jQuery UI Slider API</a>
<div>

CSS

#amount {
    border: 0;
    color: #f6931f;
    font-weight: bold;
}

JavaScript

$(function () {
var note =  ['Gb3', 'G3', 'G#3', 'Ab3', 'A3', 'A#5', 'Bb5', 'B5'];
    $("#slider-range-min").slider({
        range: true,
        values: [0,7],
        min: 0,
   			max: 7,
         any: [0, 7],
   			 step: 1,
        slide: function (event, ui) {
        		
            $("#amount").val(note[ui.values[0]]+ "-"+note[ui.values[1]]);
        }
    });
    $("#amount").val(note[0]+ "-"+note[7]);
});