Slider with Multiple Outputs

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<div id="ageInput"></div>
<div id="amount" style="color:#777;font-size:72px;text-align:center;"></div>

CSS

#ageInput {
    margin: 60px 30px 0 30px
}
#ageInput > .ui-slider-handle {
    text-decoration: none;
    width: 35px;
    text-align: center;
}

JavaScript

var ageInput = $("#ageInput"),
    initialValue = 1,
    values = [];

values = ['',15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39,15,23,26,32,39];

var updateSliderValue = function (e, ui) {
    var slider = $(this).data().slider;
    var index = ui.value || 0;
    if (index) {
        $("#amount").html(index + "=" + values[index]);
        slider.element.find(".ui-slider-handle").text(slider.value());
    }
};

var value = $("#slider").slider("value");
$("#amount").html(value);


ageInput.slider({
    min: 0,
    max: 100,
    slide: updateSliderValue,
    create: updateSliderValue,
    value: initialValue
});