adds range-nouislider

FeHixX · Jul 7, 2023 · cffa4b7 · cffa4b7
1 parent a781b6a
commit cffa4b7
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 49 deletions.
diff --git a/source/index.html b/source/index.html
@@ -14,6 +14,7 @@
     <link rel="preload" href="./fonts/montserrat-bold.woff2" type="font/woff2" as="font" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/nouislider.min.css">
     <link rel="stylesheet" href="./css/style.css">
     <title>Интернет магазин: Drink2Go</title>
   </head>
@@ -191,21 +192,10 @@ <h2 class="catalog__title title">Каталог кофейных напитко
           <form class="catalog__form form" method="get" action="https://echo.htmlacademy.ru/">
             <fieldset class="form__group">
               <legend class="form__heading">Цена</legend>
-              <div class="form__range range">
-                <div class="range__scale">
-                  <div class="range__bar" style="left: 0%; width: 93%">
-                    <button class="range__toggle range__toggle--min" type="button">
-                      <span class="visually-hidden">Изменить минимальную цену.</span>
-                    </button>
-                    <button class="range__toggle range__toggle--max" type="button">
-                      <span class="visually-hidden">Изменить максимальную цену.</span>
-                    </button>
-                  </div>
-                </div>
-              </div>
+              <div class="form__range range-slider"></div>
               <div class="form__number number">
                 <label class="visually-hidden" for="min-price">Минимальная цена.</label>
-                <input class="number__input" type="number" name="min-price" id="min-price" placeholder="0">
+                <input class="number__input" type="number" value="0" name="min-price" id="min-price" placeholder="0">
                 <label class="visually-hidden" for="max-price">Максимальная цена.</label>
                 <input class="number__input" type="number" value="900" name="max-price" id="max-price" placeholder="1000">
               </div>
@@ -547,6 +537,7 @@ <h2 class="visually-hidden">Авторское право.</h2>
     </footer>
     <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js" defer></script>
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js" defer></script>
+    <script src="https://unpkg.com/[email protected]/dist/nouislider.min.js"></script>
     <script src="./js/main.js" type="module"></script>
   </body>
 

diff --git a/source/js/main.js b/source/js/main.js
@@ -1,3 +1,4 @@
 import "./mobile-menu.js";
 import "./swiper.js";
+import "./range-slider.js";
 import "./map.js";
diff --git a/source/js/range-slider.js b/source/js/range-slider.js
@@ -0,0 +1,34 @@
+const slider = document.querySelector('.range-slider');
+const numberInputs = document.querySelectorAll('.number__input');
+const buttonReset = document.querySelector('.button--reset');
+
+noUiSlider.create(slider, {
+  start: [0, 900],
+  connect: true,
+  margin: 1,
+  step: 1,
+  range: {
+    'min': 0,
+    'max': 1000
+  }
+});
+
+slider.noUiSlider.on('update', (values, handle) => {
+  numberInputs[handle].value = Math.round(values[handle]);
+});
+
+const setRangeSlider = (index, value) => {
+  const values = [null, null];
+  values[index] = value;
+  slider.noUiSlider.set(values);
+};
+
+numberInputs.forEach((input, index) => {
+  input.addEventListener('change', (evt) => {
+    setRangeSlider(index, evt.target.value);
+  });
+});
+
+buttonReset.addEventListener('click', () => {
+  slider.noUiSlider.reset();
+})
diff --git a/source/sass/blocks/range.scss b/source/sass/blocks/range.scss
@@ -1,32 +1,26 @@
 @use "../global/variables.scss";
 
-.range {
-  display: flex;
-  align-items: center;
-  padding: 10px 0;
-}
-
-.range__scale {
-  position: relative;
+.noUi-target {
   height: 2px;
-  width: 100%;
+  padding: 0 12px;
+  box-shadow: none;
+  border-radius: 0;
+  border: none;
   background-color: variables.$light-grey;
 }
 
-.range__bar {
-  position: absolute;
-  top: -1px;
+.noUi-connects {
   height: 4px;
-  background-color: variables.$primary-lighter;
+  transform: translateY(-1px);
+}
 
-  &--disabled {
-    background-color: variables.$base-grey;
-  }
+.noUi-connect {
+  background-color: variables.$primary-lighter;
 }
 
-.range__toggle {
-  position: absolute;
-  padding: 0;
+.noUi-target .noUi-handle {
+  top: -11px;
+  right: -12px;
   width: 24px;
   height: 24px;
   border: none;
@@ -36,26 +30,13 @@
   cursor: pointer;
 
   &::before {
-    position: absolute;
-    content: "";
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 16px;
     height: 16px;
     border-radius: 50%;
-  }
-
-  &--min {
-    top: 50%;
-    left: 12px;
-    transform: translate(-50%, -50%);
-  }
-
-  &--max {
-    top: 50%;
-    right: 12px;
-    transform: translate(50%, -50%);
+    background-color: variables.$base-white;
   }
 
   &:hover,
@@ -74,10 +55,23 @@
       background-color: variables.$primary-lighter;
     }
   }
+}
 
-  &:disabled {
-    background-color: variables.$lightest-grey;
+[disabled] .noUi-handle {
+  background-color: variables.$lightest-grey;
+  box-shadow: inset 0 0 0 2px variables.$base-grey;
+  cursor: not-allowed;
+
+  &:hover,
+  &:active {
     box-shadow: inset 0 0 0 2px variables.$base-grey;
-    cursor: not-allowed;
   }
+
+  &::before {
+    display: none;
+  }
+}
+
+.noUi-handle::after {
+  display: none;
 }