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>