Saturday 18 February 2017

Price Range Jquery Dual input box with drop down

HTML

<div class="container">
    <div class="dropdown">
        <button id="min-max-price-range" class="dropdown-toggle" href="#" data-toggle="dropdown">Budget<strong class="caret"></strong>
        </button>
        <div class="dropdown-menu col-sm-2" style="padding:10px;">
            <form class="row">
                <div class="col-xs-5">
                    <input class="form-control price-label" placeholder="Min" data-dropdown-id="price-min" />
                </div>
                <div class="col-xs-2"> - </div>
                <div class="col-xs-5">
                    <input class="form-control price-label" placeholder="Max" data-dropdown-id="price-max" />
                </div>
                <div class="clearfix"></div>
                <ul id="price-min" class="col-sm-12 price-range list-unstyled">
                    <li data-value="0">0</li>
                    <li data-value="10">10</li>
                    <li data-value="20">20</li>
                    <li data-value="30">30</li>
                    <li data-value="40">40</li>
                    <li data-value="50">50</li>
                    <li data-value="60">60</li>
                </ul>
                <ul id="price-max" class="col-sm-12 price-range text-right list-unstyled hide">
                    <li data-value="0">0</li>
                    <li data-value="10">10</li>
                    <li data-value="20">20</li>
                    <li data-value="30">30</li>
                    <li data-value="40">40</li>
                    <li data-value="50">50</li>
                    <li data-value="60">60</li>
                </ul>
            </form>
        </div>
    </div>
</div>

HTML

$('#min-max-price-range').click(function(event) {
    setTimeout(function() {
        $('.price-label').first().focus();
    }, 0);
});
var priceLabelObj;
$('.price-label').focus(function(event) {
    priceLabelObj = $(this);
    $('.price-range').addClass('hide');
    $('#' + $(this).data('dropdownId')).removeClass('hide');
});

$(".price-range li").click(function() {
    priceLabelObj.attr('value', $(this).attr('data-value'));
    var curElmIndex = $(".price-label").index(priceLabelObj);
    var nextElm = $(".price-label").eq(curElmIndex + 1);

    if (nextElm.length) {
        $(".price-label").eq(curElmIndex + 1).focus();
    } else {
        $('#min-max-price-range').dropdown('toggle');
    }
});

No comments:

Post a Comment