jQueryUI 1.8.14 Autocomplete

by PPvG

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
<div id="slider"></div>

CSS

#slider {
    margin: 1em;
}

.ui-slider-label {
    width: 4em;
    padding: .5em;
    background: #eee;
    border: 1px solid #bbb;
    text-align: center;
}

JavaScript

(function($) {

    $.fn.sliderLabel = function(options) {

        var settings = $.extend({
            marginTop: 2,
            // Margin between the slider handle and the label (in pixels)
            callback: function(value) {
                return 'Value: ' + value;
            }
        }, options);

        return this.each(function() { // <- maintains chainability
            var slider = $(this);
            var handle = slider.children('.ui-slider-handle');
            var data = slider.data('sliderLabel');

            if (handle.length === 0) {
                // $(this) isn't a slider (it has no handle)
                console.log('[SliderLabel] Error: sliderLabel() can only be called on a slider.');
                return;
            }

            if (data === undefined) {
                // First time sliderLabel() is called on this slider
                data = {
                    label: $('<div class="ui-slider-label" />').css('position', 'absolute'),
                    callback: settings.callback
                };

                data.label.insertAfter(slider);

                function updateLabel() {
                    var value = slider.slider('value');
                    var labelText = data.callback(value);

                    data.label.html(labelText);
                    data.label.css('top', handle.offset().top + handle.outerHeight() + settings.marginTop);
                    data.label.css('left', handle.offset().left - ((data.label.width() - handle.width()) / 2));
                }

                updateLabel();
                slider.bind('slide', updateLabel);

            } else {
                // sliderLabel() was called before; just update the callback:
                data.callback = settings.callback;
                updateLabel();
            }

            // Save (or update) the data inside the slider:
            slider.data('sliderLabel', data);
        });
   ...