Angular Range Example - SearchFormDirective.html

SearchFormDirective.html

<!-- Advanced Search -->
<div class="row" ng-controller="PriceRangeCtrl">

    <div class="col-lg-4">
        <h4>Product</h4>
        <div class="row">
            <div class="col-lg-12 col-md-6 col-xs-12 col-sm-12 col-sd-12">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Product title">
                </div>
            </div>
            <div class="col-lg-12 col-md-6 col-xs-12 col-sm-12 col-sd-12">
                <div class="dropdown inner-addon right-addon">
                    <i class="glyphicon glyphicon-chevron-down"></i>
                    <input type="text" class="form-control dropdown-toggle" placeholder="Category" id="dropdownMenu1" data-toggle="dropdown">
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Category</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another category</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="row">
            <div class="col-md-6">
                <h4>Current Price</h4>
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-sd-6">
                        <div class="inner-addon left-addon">
                            <i class="glyphicon glyphicon-usd"></i>
                            <input type="text" class="form-control" ng-model="price.price"/>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-sd-6">
                        <div class="form-group inner-addon left-addon">
                            <i class="glyphicon glyphicon-usd"></i>
                            <input type="text" class="form-control" placeholder="10000">
                        </div>
                    </div>
                </div>
                <input class = "form-control" type="range" min="0" max="10000" ng-model="price.price">

            </div>
            <div class="col-md-6">
                <h4>Max Auction Close Date</h4>
                <div class="row">
                    <div class="col-sm-10 col-sd-10 col-xs-10">
                        <div class="form-group">
                            <input type="date" class = "form-control" placeholder="25.12.2014"/>
                        </div>
                    </div>
                    <div class="col-sm-2 col-sd-2 col-xs-2">
                        <button type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-8 col-sd-8 col-xs-8">
                        <h4>Number of Bids</h4>
                    </div>
                    <div class="col-sm-4 col-sd-4 col-xs-4">
                        <input type="number" class = "form-control" placeholder="1"/>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12 top-buffer text-center">
            <button type="button"  class = "btn btn-default" id="find">
                Find now
            </button>
        </div>
    </div>

</div>
<!-- / Advanced Search -->