Не работает jqueryUI при значении max выше 10000000
Добрый всем вечер, проблема такая
$( 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) } может кто то сталкивался с такой проблемой? |
попробуй step: 100
|
slider limit
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> |
Часовой пояс GMT +3, время: 12:46. |