input range cannot working with jquery ui

rista 0
Viewed 44

I want to add an input range to the form that I made earlier. I have followed the jQueryUI documentation but after I implemented the input range it can't execute when it is shifted.

I've written a script like this but it still doesn't work

        $(document).ready(function() {
            $('.common_selector').click(function() {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                filter_data();

                function filter_data() {

                    //$('.filter_data').html('<div id="loading" style="" ></div>');
                    var action = 'fetch_data';
                    var capacity = get_filter('capacity');
                    var frame = get_filter('frame');


                    $.ajax({
                        url: "/getfiltersofa",
                        method: "POST",
                        data: {
                            action: action,
                            capacity: capacity,
                            frame: frame,
                        },
                        success: function(data) {
                            document.getElementById('shop').style.display =
                                "none";
                            // $('.grid-inner').hide();
                            $.each(data, function(key, value) {
                                $(".filter_data").empty();

                                $.each(data, function(key, value) {
                                    $(".filter_data").append(
                                        '<div class="col-sm-4 col-lg-3 col-md-3">' +
                                        '<div class="px-3 py-2">' +
                                        '<div class="grid-inner card2 m-0">' +

                                        '<div class="product-image">' +
                                        '<a href="/product-detail/' + value
                                        .pi_id +
                                        '"><img src="{{ asset('assets/frontend/images/products/product1.jpg') }}"></a>' +
                                        '<a href="/product-detail/' + value
                                        .pi_id +
                                        '"><img src="{{ asset('assets/frontend/images/products/product2.jpg') }}"></a>' +
                                        '</div>' + //end image

                                        '<div class="product-desc center">' +
                                        '<div class="product-title"><h3><a href="/product-detail/' +
                                        value.pi_id + '">' +
                                        value.pc_name +
                                        '</a></h3></div>' + //end category
                                        '<a href="/product-detail/' + value
                                        .pi_id +
                                        '"><div class="product-price"><ins>' +
                                        value.sp_price + '<ins></div></a>' +
                                        '</div>' +

                                        '</div>' +
                                        '</div>' +
                                        '</div>'
                                    );
                                });
                            });
                        }
                    });
                }

                function get_filter(class_name) {
                    var filter = [];
                    $('.' + class_name + ':checked').each(function() {
                        filter.push($(this).val());
                    });
                    return filter;
                }

                $('.common_selector').click(function() {
                    filter_data();
                });

I should have thought the code was put here but if I put it here the range slider is gone

                // $('#price_range').slider({
                //     range: true,
                //     min: 1000,
                //     max: 65000,
                //     values: [1000, 65000],
                //     step: 500,
                //     stop: function(event, ui) {
                //         $('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
                //         $('#hidden_minimum_price').val(ui.values[0]);
                //         $('#hidden_maximum_price').val(ui.values[1]);
                //         filter_data();
                //     }
                // });


            });

I try to put the script here for the range slider to run normally but can't execute the post command

            $('#price_range').slider({
                range: true,
                min: 0,
                max: 200,
                values: [0, 200],
                step: 10,
                stop: function(event, ui) {
                    $('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
                    $('#hidden_minimum_price').val(ui.values[0]);
                    $('#hidden_maximum_price').val(ui.values[1]);
                    filter_data();
                }
            });
        });

I've written a script like this but it still doesn't work
#filter a {
            padding-left: 20px;
            padding-right: 20px;
            font-family: 'Poppins', sans-serif;
            font-size: 13px;
        }

        #filter nav {
            background-color: white;
        }

        #filter label {
            font-size: 12px !important;
            font-weight: normal !important;
            text-transform: capitalize !important;
        }

        #filter li {
            z-index: 2;
        }

        #filter .dropdown-menu {
            margin-top: 10px;
            border: none;
        }

        .common_selector {
            margin-right: 10px;
            border-radius: 1px;
        }

        .img-script {
            margin-top: -50px !important;
        }

        .price-script {
            margin-top: -23px;
        }
I've written a script like this but it still doesn't work
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

  </head>
  <body>
    
    <section id="filter" class="page-title-center">
        <nav class="navbar navbar-expand navbar-light ">
            <div class="container-fluid ">
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item dropdown">
                            <a style="border-right: 1px solid rgba(133, 132, 132, 0.301)" class="nav-link" href="#"
                                id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fa-solid fa-sliders"></i>

                                FILTER
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a style="border-right: 1px solid rgba(133, 132, 132, 0.301)" class="nav-link dropdown-toggle"
                                href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown"
                                aria-expanded="false">
                                CAPACITY
                            </a>
                            <ul class="dropdown-menu shadow-sm" aria-labelledby="navbarDropdownMenuLink">
                                <li>
                                    <div class="container checkbox capacity">
                                        <label>
                                            <input type="checkbox" class="common_selector capacity" value="3.5"> 3.5
                                            Seater
                                        </label>
                                        <label>
                                            <input type="checkbox" class="common_selector capacity" value="3"> 3 Seater
                                        </label>
                                        <label>
                                            <input type="checkbox" class="common_selector capacity" value="2.5"> 2.5
                                            Seater
                                        </label>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a style="border-right: 1px solid rgba(133, 132, 132, 0.301)" class="nav-link dropdown-toggle"
                                href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown"
                                aria-expanded="false">
                                FRAME
                            </a>
                            <ul class="dropdown-menu shadow-sm" aria-labelledby="navbarDropdownMenuLink">
                                <li>
                                    <div class="container checkbox frame">
                                        <label>
                                            <input type="checkbox" class="common_selector frame" value="wood"> Wood
                                        </label>
                                        <br>
                                        <label>
                                            <input type="checkbox" class="common_selector frame" value="aluminium">
                                            Aluminium
                                        </label>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a style="border-right: 1px solid rgba(133, 132, 132, 0.301)" class="nav-link dropdown-toggle"
                                href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown"
                                aria-expanded="false">
                                DIMENSION
                            </a>
                            <ul class="dropdown-menu shadow-sm" aria-labelledby="navbarDropdownMenuLink">
                                <li>
                                    <div class="container">
                                        <div class="list-group">
                                            <input type="hidden" id="hidden_minimum_price" value="0" />
                                            <input type="hidden" id="hidden_maximum_price" value="65000" />
                                            <p id="price_show">0 - 200 Cm</p>
                                            <div id="price_range"></div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </section>
    
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

jquery-ui jquery laravel javascript
1 Answers

The code snippet should reside in your code someplace after the DIV elements are ready. So if they are updated or created dynamically, maybe put the code at the end.

Testing here:

$(function() {
  $('#price_range').slider({
    range: true,
    min: 0,
    max: 200,
    values: [0, 200],
    step: 10,
    slide: function(event, ui) {
      $('#price_show').html("$" + ui.values[0] + " - $" + ui.values[1]);
      $('#hidden_minimum_price').val(ui.values[0]);
      $('#hidden_maximum_price').val(ui.values[1]);
      //filter_data();
    }
  });
});
#price_range {
  margin: 10px;
  ;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<form>
  <label>Set Price Range</label>
  <div id="price_range"></div>
  <div id="price_show">$0 - $200</div>
  <input type="hidden" id="hidden_minimum_price" value="0" />
  <input type="hidden" id="hidden_maximimum_price" value="200" />
</form>

Twisty0
Related