inputSlider custom widget

by john_s

HTML

<form id="testForm">
    <div id="slider" data-name="price" data-value="$25"></div>
</form>
<br />
<div id="output"></div>

JavaScript

$(function() {
    $.widget("ui.inputSlider", $.ui.slider, {

        _create: function() {
            var changeCallback = this.options.change,
                values = this.options.inputValues,
                value = this.element.data('value') || values[0];

            var $input = this.input = $('<input type="hidden" />').attr({
                id: this.element.data('id'),
                name: this.element.data('name'),
                value: value
            }).insertAfter(this.element);

            $.extend(this.options, {
                min: 0,
                max: values.length - 1,
                range: null,
                values: null,
                change: function(event, ui) {
                    $input.val(values[ui.value]);
                    if (changeCallback) {
                        changeCallback.call(this, event, ui);
                    }
                },
                value: $.inArray(value, values)
            });

            $.ui.slider.prototype._create.call(this, arguments);
        },

        inputValue: function(value) {
            if (value) {
                return this.element.inputSlider('value', $.inArray(value, this.options.inputValues));
            } else {
                return this.input.val();
            }
        }
    });

    // Here we instrument our element to be an inputSlider. We include a
    // "change" callback just so we can see that it is working. It also shows
    // that you can provide a "change" callback.
    $('#slider').inputSlider(
        {
            inputValues: ['$10', '$25', '$50', '$75', '$100', '$150'],
            change: function() {
                $('#output').text($('#slider').inputSlider('inputValue'));
            }
        }
    );

    // We display the initial value of the hidden input just to show it
    // worked.
    $('#output').text($('#slider').inputSlider('inputValue'));
});