jQuery range dropdown

script.js

var RangeDropdown = function () {
    var $from, $to, $el, data;

    function create($element) {
        $el = $element;
        data = $el.data('range-dropdown');

        $from = $(data.from);
        $to = $(data.to);

        $from.on('click focus', init);
        $to.on('click focus', init);

        $from.on('change keyup', function () {
            var value = $(this).val();
            var id = $(this).attr('id');

            changeSelected(id, value);
        });

        $to.on('change keyup', function () {
            var value = $(this).val();
            var id = $(this).attr('id');

            changeSelected(id, value);
        });

        $('html').click(hideDropdown);
    }

    function changeSelected(id, value) {
        var $parent = $el.find('[data-target="#' + id + '"]');

        $parent.find('li').removeClass('selected');

        $parent.find('[data-value="' + value + '"]')
            .addClass('selected');

        addInActive('#' + id, value);
    }

    function hideDropdown() {
        $el.find('.range-dropdown-list').hide();
    }

    function showDropdown() {
        $('.range-dropdown-list').hide();

        $el.find('.range-dropdown-list').show();
    }

    function init(e) {
        e.stopPropagation();
        if ($el.attr('data-initialized')) {
            showDropdown();
            return;
        }

        var html = '<div class="range-dropdown-list">' + valuesHtml(data.from) + valuesHtml(data.to) + '</div>';

        $el.append(html);
        $el.attr('data-initialized', '1');
        $el.find('[data-value]').click(toggleValue);
        changeSelected(data.from.replace('#', ''), $(data.from).val());
        changeSelected(data.to.replace('#', ''), $(data.to).val());
    }

    function toggleValue(e) {
        e.stopPropagation();
        var $parent = $(this).parent();

        $parent.find('li').removeClass('selected');

        if ($(this).hasClass('in-active')) {
            $(this).removeClass('in-active');
            deSelectValue($parent);
        }

        $(this).addClass('selected');

        addInActive($parent.data('target'), $(this).data('value'));
        changeValue($parent, $(this));
    }

    function deSelectValue($parent) {
        var target = $parent.data('target');

        if (target === data.from) {
            // deselect data.to
            $(data.to).val('');
            changeSelected(data.to.replace('#', ''), $(data.to).val());
        } else {
            // deselect data.from
            $(data.from).val('');
            changeSelected(data.to.replace('#', ''), $(data.from).val());
        }
    }

    function addInActive(target, value) {
        if (!value) {
            return;
        }

        if (target === data.from) {
            // add inactive to data.to
            var $items = $el.find('[data-target="' + data.to + '"] li');

            $items.each(function () {
                if ($(this).data('value') < value) {
                    $(this).addClass('in-active');
                } else {
                    $(this).removeClass('in-active');
                }
            });
        } else {
            // add inactive to data.from

            var $items = $el.find('[data-target="' + data.from + '"] li');

            $items.each(function () {
                if ($(this).data('value') > value) {
                    $(this).addClass('in-active');
                } else {
                    $(this).removeClass('in-active');
                }
            });
        }
    }

    function changeValue($parent, $listItem) {
        var input = $($parent.data('target'));

        input.val($listItem.data('value'));
    }

    function valuesHtml(target) {
        var html = '<ul data-target="' + target + '">';

        data.values.forEach(function (value) {
            html += '<li data-value="' + value + '">' + value + '</li>';
        });

        return html += '</ul>';
    }

    return {
        create: create
    }
};

$('[data-range-dropdown]').each(function () {
    var rangeDropdown = new RangeDropdown;

    rangeDropdown.create($(this));
});

styles.css

.range-dropdown {
    position: relative;
}

.range-dropdown-list {
    position: absolute;
    width: 100%;
    top: 35px;
    border: 1px solid #000;
    z-index: 10;
    background-color: #fff;
}

.range-dropdown-list ul {
    width: 50%;
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: 200px;
    overflow: auto;
}

.range-dropdown-list li {
    line-height: 36px;
    padding: 0 10px;
    border-bottom: 1px solid #000;
    background-color: #fff;
}

.range-dropdown-list li:last-of-type {
    border-bottom: 0;
}

.range-dropdown-list li.in-active {
    opacity: 0.5;
}

.range-dropdown-list li.selected,
.range-dropdown-list li:hover {
    background-color: lightgrey;
}

template.php

<div class="range-dropdown" data-range-dropdown='{
            "from": "#price_from",
            "to": "#price_to",
            "values": <?php echo json_encode(range(1, 2000)) ?>
        }'>
    <input id="price_from" type="text">
    <input id="price_to" type="text">
</div>