Добавил выбор диапазона

.yaspellerrc

@@ -43,6 +43,7 @@
     "tbody",
     "tfoot",
     "thead",
+    "noUiSlider",
     "cleancss"
   ]
 }

package.json

@@ -58,6 +58,7 @@
     "jquery-migrate": "^3.0.0",
     "lint-staged": "^3.4.0",
     "merge-stream": "^1.0.1",
+    "nouislider": "^9.2.0",
     "owl.carousel": "^2.2.0",
     "postcss-import": "^9.1.0",
     "postcss-inline-svg": "^2.3.0",

projectConfig.json

@@ -45,12 +45,14 @@
     "owl-carousel": [],
     "swipe": [],
     "pagination": [],
-    "breadcrumbs": []
+    "breadcrumbs": [],
+    "nouislider": []
   },
   "addCssBefore": [
     "./src/scss/variables.scss",
     "./src/scss/mixins.scss",
-    "../../node_modules/owl.carousel/dist/assets/owl.carousel.css"
+    "../../node_modules/owl.carousel/dist/assets/owl.carousel.css",
+    "../../node_modules/nouislider/distribute/nouislider.css"
   ],
   "addCssAfter": [
     "./src/scss/print.scss"
@@ -64,7 +66,8 @@
     "./node_modules/svg4everybody/dist/svg4everybody.js",
     "./node_modules/ismobilejs/isMobile.min.js",
     "./node_modules/owl.carousel/dist/owl.carousel.js",
-    "./node_modules/swipejs/build/swipe.min.js"
+    "./node_modules/swipejs/build/swipe.min.js",
+    "./node_modules/nouislider/distribute/nouislider.js"
   ],
   "addJsAfter": [
     "./src/js/global-script.js"

src/blocks-demo.html

@@ -1639,6 +1639,58 @@
 
     </section>
 
+    <section class="blocks-library__item" id="nouislider" data-name=".nouislider">
+
+      <h2 class="blocks-library__item-title">Выбор диапазона с <a href="https://refreshless.com/nouislider/">noUiSlider</a></h2>
+
+      <div class="nouislider" id="demo-nouislider"></div>
+
+      <p>
+        <input type="number" value="10" id="demo-nouislider-start">
+        <input type="number" value="90" id="demo-nouislider-end">
+      </p>
+
+      <div class="blocks-library__code-wrapper">
+        <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
+        <div class="blocks-library__code">
+          <pre class="code">
+            <code>&lt;div class="nouislider" id="demo-nouislider">&lt;/div></code>
+            <code>&lt;input type="number" value="10" id="demo-nouislider-start"></code>
+            <code>&lt;input type="number" value="90" id="demo-nouislider-end"></code>
+          </pre>
+          <pre class="code">
+            <code>var demoNoUiSlider = document.getElementById('demo-nouislider');</code>
+            <code>var demoNoUiSliderStartInput = document.getElementById('demo-nouislider-start');</code>
+            <code>var demoNoUiSliderEndInput = document.getElementById('demo-nouislider-end');</code>
+            <code>noUiSlider.create(demoNoUiSlider, {</code>
+            <code>  start: [demoNoUiSliderStartInput.value, demoNoUiSliderEndInput.value],</code>
+            <code>  connect: true,</code>
+            <code>  step: 1,</code>
+            <code>  range: {</code>
+            <code>    'min': 0,</code>
+            <code>    'max': 100</code>
+            <code>  }</code>
+            <code>});</code>
+            <code>demoNoUiSlider.noUiSlider.on('update', function( values, handle ) {</code>
+            <code>  var value = values[handle];</code>
+            <code>  if ( handle ) {</code>
+            <code>    demoNoUiSliderEndInput.value = Math.round(value);</code>
+            <code>  } else {</code>
+            <code>    demoNoUiSliderStartInput.value = Math.round(value);</code>
+            <code>  }</code>
+            <code>});</code>
+            <code>demoNoUiSliderEndInput.addEventListener('change', function(){</code>
+            <code>  demoNoUiSlider.noUiSlider.set([null, this.value]);</code>
+            <code>});</code>
+            <code>demoNoUiSliderStartInput.addEventListener('change', function(){</code>
+            <code>  demoNoUiSlider.noUiSlider.set([this.value, null]);</code>
+            <code>});</code>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
   </div>
 
   <a href="#" class="to-top" id="toTop">↑</a>
@@ -1665,6 +1717,34 @@
         callback: function(index, elem, dir) {},
         transitionEnd: function(index, elem) {}
       });
+
+      var demoNoUiSlider = document.getElementById('demo-nouislider');
+      var demoNoUiSliderStartInput = document.getElementById('demo-nouislider-start');
+      var demoNoUiSliderEndInput = document.getElementById('demo-nouislider-end');
+      noUiSlider.create(demoNoUiSlider, {
+        start: [demoNoUiSliderStartInput.value, demoNoUiSliderEndInput.value],
+        connect: true,
+        step: 1,
+        range: {
+          'min': 0,
+          'max': 100
+        }
+      });
+      demoNoUiSlider.noUiSlider.on('update', function( values, handle ) {
+        var value = values[handle];
+        if ( handle ) {
+          demoNoUiSliderEndInput.value = Math.round(value);
+        } else {
+          demoNoUiSliderStartInput.value = Math.round(value);
+        }
+      });
+      demoNoUiSliderEndInput.addEventListener('change', function(){
+        demoNoUiSlider.noUiSlider.set([null, this.value]);
+      });
+      demoNoUiSliderStartInput.addEventListener('change', function(){
+        demoNoUiSlider.noUiSlider.set([this.value, null]);
+      });
+
     });
   </script>
 </body>

src/blocks/nouislider/nouislider.html

+<!--DEV
+
+Для использования этого файла как шаблона:
+
+@ @include('blocks/nouislider/nouislider.html')
+
+(Нужно убрать пробел между символами @)
+Подробнее: https://www.npmjs.com/package/gulp-file-include
+
+-->
+
+<div class="nouislider" id="demo-nouislider"></div>

src/blocks/nouislider/nouislider.scss

+// В этом файле должны быть стили только для БЭМ-блока nouislider, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Не пишите здесь другие селекторы.
+
+.nouislider {
+  // По умолчанию в сборку берется стилевой файл этого слайдера, предоставляемый
+  // автором пакета (см. файл настройки проекта, там подключается
+  // nouislider/distribute/nouislider.css).
+}