JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css">
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<body>
<section id="catalog">
<div class="catalog-01">
<div class="container">
<div class="section-heading text-center">
<p>Используйте слайдеры для выбора необходимых параметров</p>
</div>
<div class="row">
<div class="col-md-4 box-slider">
<p class="box-title">Наибольший габарит, мм</p>
<div class="range-slider">
<input type="text" id="sizemax-slider" value="" name="sizemax-slider" />
</div>
<div id="sizemax-slider-result"> <span class="sizemax-from"></span> – <span class="sizemax-to"></span>
</div>
</div>
<div class="col-md-4 box-slider" style="margin-left: -1px;">
<p class="box-title">Наименьший габарит, мм</p>
<div class="range-slider">
<input type="text" id="sizemin-slider" value="" name="sizemin-slider" />
</div> <span class="sizemin-from"></span> – <span class="sizemin-to"></span>
</div>
<div class="col-md-4 box-slider" style="margin-left: -1px;">
<p...
CSS
.col-md-4 { width: 33%; float:left; }
.box-slider { border: 1px solid #ccc; }
.row {display: block;}
.container { width:90%; margin:0 auto; }
.grid { display: block; margin-top:200px; }
.grid-item { width: 100px; }
.grid-item p { display:inline; font-size:12px; }
JavaScript
$(function () {
// todo:
// ....
//
var $win = $(window),
//$container = $('.grid').isotope(),
$container = $('.grid'),
$sizemaxSlider = $("#sizemax-slider"),
$sizemaxFrom = $('.sizemax-from'),
$sizemaxTo = $('.sizemax-to'),
$sizeminSlider = $("#sizemin-slider"),
$sizeminFrom = $('.sizemin-from'),
$sizeminTo = $('.sizemin-to'),
$regionSlider = $("#region-slider"),
$regionFrom = $('.region-from'),
$regionTo = $('.region-to'),
$imgs = $("img.lazy");
var sizemaxTrack = function (data) {
$sizemaxFrom.html(data.from);
$sizemaxTo.html(data.to);
};
var sizeminTrack = function (data) {
$sizeminFrom.html(data.from);
$sizeminTo.html(data.to);
};
var regionTrack = function (data) {
$regionFrom.html(data.from);
$regionTo.html(data.to);
};
$sizemaxSlider.ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 0,
from_min: 6,
max: 370,
from: 140,
to: 220,
type: 'double',
step: 1,
prefix: "Габариты: ",
postfix: " мм",
grid: true,
decorate_both: false,
onStart: sizemaxTrack,
onChange: sizemaxTrack,
onFinish: sizemaxTrack,
onUpdate: sizemaxTrack
});
$sizeminSlider.ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 0,
max: 210,
from: 75,
to: 125,
type: 'double',
step: 1,
prefix: "Габариты: ",
postfix: " мм",
grid: true,
decorate_both: false,
onStart: sizeminTrack,
onChange:...