Форум

Step48_rus · #1 (**permalink**) 18.05.2021, 21:26

Добрый всем вечер, проблема такая
$( function() {
$( "#slider-price" ).slider({
range: true,
min: 2421040,
max: 10105200,
values: [ 2421040, 10105200 ],
slide: function( event, ui ) {
$( "#slider-price1" ).val(ui.values[ 0 ]);
$( "#slider-price2" ).val(ui.values[ 1 ] );
}
});
$( "#slider-price1" ).val($( "#slider-price" ).slider( "values", 0 ));
$( "#slider-price2" ).val($( "#slider-price" ).slider( "values", 1 ));
} );

Не работает, но если ставить

$( function() {
$( "#slider-price" ).slider({
range: true,
min: 2421040,
max: 9999999,
values: [ 2421040, 9999999],
slide: function( event, ui ) {
$( "#slider-price1" ).val(ui.values[ 0 ]);
$( "#slider-price2" ).val(ui.values[ 1 ] );
}
});
$( "#slider-price1" ).val($( "#slider-price" ).slider( "values", 0 ));
$( "#slider-price2" ).val($( "#slider-price" ).slider( "values", 1 ));
} );

На сайте скрываются элементы которые не входят в данный диапозон, вот код
function changeCenyTable() {
setTimeout(function () {
$( ".tftable tr.flat" ).each(function() {

if ( ($(this).attr("data-price") < $("input#slider-price1").val()) || ($(this).attr("data-price") > $("input#slider-price2").val()) ) {
$(this).hide();
}
});
}, 201)
}
может кто то сталкивался с такой проблемой?

Aetae · #2 (**permalink**) 18.05.2021, 22:32

попробуй step: 100

рони · #3 (**permalink**) 19.05.2021, 00:13

Step48_rus,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.css">
    <style type="text/css">
        .hide {
            display: none;
        }
        #slider-price {
            margin: 20px;
            width: 500px;
            height: 5px;
        }
        .ui-slider-handle {
            border-radius: 50%;
            position: relative;
            font-size: 14px;
            display: block;
        }
        .ui-slider-horizontal .ui-slider-handle {
            top: 0.5em;
            background: transparent;
            border-radius: 0%;
            width: 0;
            height: 0;
            border-top: none;
            text-decoration: none;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 14px solid red;
        }
        .ui-slider-horizontal .ui-slider-handle:focus {
            outline: 0;
        }
        .ui-slider-horizontal .ui-slider-handle:last-of-type {
            background: transparent;
            border-bottom: none;
            border-top: 14px solid red;
            top: -1.2em;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function() {
            let [a, b] = [min, max] = [2421040, 10105200], limit = 1000;
            $("#slider-price").slider({
                range: true,
                min: 0,
                max: limit,
                values: [0, limit],
                slide: function(event, ui) {
                    [a, b] = ui.values.map(c => Math.trunc(min + (max - min) / limit * c));
                    $("#slider-price1").val(a);
                    $("#slider-price2").val(b);
                    filterTr();
                }
            });
            $("#slider-price1").on("input", function() {
                a = +this.value;
                let arr = [a, b].map(a => Math.trunc((a - min) / (max - min) * limit));
                $("#slider-price").slider("values", arr)
                filterTr();
            }).val(a);
            $("#slider-price2").on("input", function() {
                b = +this.value;
                let arr = [a, b].map(a => Math.trunc((a - min) / (max - min) * limit));
                $("#slider-price").slider("values", arr)
                filterTr();
            }).val(b);
            function filterTr() {
                $(".tftable tr.flat").each(function(i, tr) {
                    const price = +tr.dataset.price;
                    tr.classList.toggle("hide", (price < a || price > b))
                })
            }
        });
    </script>
</head>
<body>
    <div id="slider-price"></div>
    <input type="text" id="slider-price1"><input type="text" id="slider-price2">
    <table class="tftable">
        <tr class="flat" data-price="2421040">
            <td>2421040</td>
        </tr>
        <tr class="flat" data-price="3000000">
            <td>3000000</td>
        </tr>
        <tr class="flat" data-price="5000000">
            <td>5000000</td>
        </tr>
        <tr class="flat" data-price="7000000">
            <td>7000000</td>
        </tr>
        <tr class="flat" data-price="10105200">
            <td>10105200</td>
        </tr>
    </table>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript