diff --git a/source/index.html b/source/index.html index c519d3e..3b704c1 100644 --- a/source/index.html +++ b/source/index.html @@ -14,6 +14,7 @@ + Интернет магазин: Drink2Go @@ -191,21 +192,10 @@

Каталог кофейных напитко
Цена -
-
-
- - -
-
-
+
- +
@@ -547,6 +537,7 @@

Авторское право.

+ diff --git a/source/js/main.js b/source/js/main.js index 2ea4e7f..07e0d70 100644 --- 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 new file mode 100644 index 0000000..d594cf9 --- /dev/null +++ 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 index dfeef3a..5b5289d 100644 --- 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; }