Add filte slider

src/js/filter-slider.js

+'use strict';
+
+(function () {
+    var listFilter = document.querySelectorAll('.filter__slider');
+    if(listFilter) {
+        listFilter.forEach(function (itemSlider) {
+            var bodySlider = itemSlider.querySelector('.filter__slider-body');
+            noUiSlider.create(bodySlider, {
+                start: [10, 30],
+                connect: true,
+                range: {
+                    'min': -20,
+                    'max': 40
+                }
+            })
+        });
+    }
+})();
\ No newline at end of file

src/scss/catalog-filter/catalog-filter-main.scss

+@import "../settings/color";
+
+.filter{
+  background: $about-bg;
+}
+
+.filter__wrapper{
+}
+
+.filter__list{
+  display: flex;
+  list-style-type: none;
+  padding-left: 0;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin: 0;
+}
+
+.filter__item{
+  width: 25%;
+  padding: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.filter__slider{
+  width: 100%;
+  padding: 0 30px;
+  position: relative;
+  &:after{
+    content: "";
+    display: inline-block;
+    width: 1px;
+    height: 100%;
+    background: $white-text;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+  }
+}
+
+.filter__slider-title{
+  text-align: center;
+  padding-bottom: 20px;
+}
+
+.filter-slider__main-head{
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-top: 10px;
+}
+
+.filter-slider__input{
+  input{
+    width: 70px;
+    border-radius: 50px;
+    border: none;
+  }
+  p{
+    margin: 0;
+    text-align: center;
+    font-size: 12px;
+    color: rgba($grey-text, .5);
+  }
+}
+
+.filter__slider-body{
+  border-radius: 50px;
+  .noUi-connect{
+    background: $red-color;
+  }
+  .noUi-handle{
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 2px solid $red-color;
+    top: 0;
+    right: -8px !important;
+    &:after, &:before{
+      display: none;
+    }
+  }
+}
\ No newline at end of file

src/template/catalog-filter/index.html

 <div class="filter">
     <div class="wrapper filter__wrapper">
         <ul class="filter__list">
-            <li class="filter__item"></li>
-            <li class="filter__item"></li>
-            <li class="filter__item"></li>
+            <li class="filter__item">
+                <div class="filter__slider">
+                    <div class="filter__slider-title">Грузоподъемность, кг</div>
+                    <div class="filter__slider-body"></div>
+                    <div class="filter-slider__main-head">
+                        <div class="filter-slider__input">
+                            <input type="text" class="filter__slider-min">
+                            <p>min 10</p>
+                        </div>
+                        <div class="filter-slider__input">
+                            <input type="text" class="filter__slider-max">
+                            <p>max 100</p>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li class="filter__item">
+                <div class="filter__slider">
+                    <div class="filter__slider-title">Грузоподъемность, кг</div>
+                    <div class="filter__slider-body"></div>
+                    <div class="filter-slider__main-head">
+                        <div class="filter-slider__input">
+                            <input type="text" class="filter__slider-min">
+                            <p>min 10</p>
+                        </div>
+                        <div class="filter-slider__input">
+                            <input type="text" class="filter__slider-max">
+                            <p>max 100</p>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li class="filter__item">
+                <div class="filter__slider">
+                    <div class="filter__slider-title">Грузоподъемность, кг</div>
+                    <div class="filter__slider-body"></div>
+                    <div class="filter-slider__main-head">
+                        <div class="filter-slider__input">
+                            <input type="text" class="filter__slider-min">
+                            <p>min 10</p>
+                        </div>
+                        <div class="filter-slider__input">
+                            <input type="text" class="filter__slider-max">
+                            <p>max 100</p>
+                        </div>
+                    </div>
+                </div>
+            </li>
             <li class="filter__item"></li>
         </ul>
     </div>