Вот пример. У вас скрипт отдает две переменные from и to (диапазон). Его надо отправлять на сервер через AJAX и получать товары, а затем вставлять в слайдер. Так? А если товары типа уже загружены, то перебирать их в цикле и проверять, что если их цена больше from и меньше to, тогда их выводить в слайдер.
Строка 42.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/ion.rangeSlider.css">
<link rel="stylesheet" href="css/ion.rangeSlider.skinFlat.css">
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/ion.rangeSlider.js"></script>
</head>
<body>
<div style="position: relative; padding: 200px;">
<div>
<input type="text" id="range" value="" name="range" />
</div>
</div>
<script>
$(function () {
var $range = $("#range");
$range.ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 50,
max: 500,
from: 100,
to: 300,
type: 'double',
step: 1,
prefix: "$",
grid: true
});
$range.on("change", function () {
var $this = $(this),
from = $this.data("from"),
to = $this.data("to");
/* И здесь нужно сформировать AJAX запрос на сервер. */
});
});
</script>
</body>
</html>