@page
@model WebApp.Pages.CatalogModel
@{
    ViewData["Title"] = "Каталог оружия";
}
<!-- Шапка -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Catalog</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Категории
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Пистолеты</a>
                    <a class="dropdown-item" href="#">Револьверы</a>
                    <a class="dropdown-item" href="#">Винтовки</a>
                </div>
            </li>
        </ul>
        <form method="get">
            <div class="form-inline col-lg-12">
                <input class="form-control mr-sm-2" type="search" placeholder="Поиск" name="search" value="">
                <button class="btn btn-outline-success" type="submit"><i class="fas fa-search"></i></button>
            </div>
        </form>
        <div class="form-group">
            <form method="get" m>
                <input type="range" step="100" min="0" max="10000" value="50000" class="custom-range" id="priceFrom">
                <label for="priceFrom">От: <span id="priceLabelFrom">50 000</span> руб.</label>
            </form>

            <form method="get">
                <input type="range" step="100" min="0" max="100000" value="50000" class="custom-range" id="priceTo">
                <label for="priceTo">До: <span id="priceLabelTo">50 000</span> руб.</label>
            </form>
        </div>
    </div>
</nav>

@section Scripts {
    <script>
        document.getElementById("priceFrom").addEventListener("input", function () {
            var price = this.value;
            document.getElementById("priceLabelFrom").textContent = price + " руб.";
            // Здесь должен быть код для фильтрации товаров по цене
        });

        document.getElementById("priceTo").addEventListener("input", function () {
            var price = this.value;
            document.getElementById("priceLabelTo").textContent = price + " руб.";
            // Здесь должен быть код для фильтрации товаров по цене
        });
    </script>
}