From b773ca8fd6c2f21f4e41567a578c4f363fb02c38 Mon Sep 17 00:00:00 2001 From: Sam <74021826+x39OME@users.noreply.github.com> Date: Sun, 30 Apr 2023 17:09:43 +0300 Subject: [PATCH] Add files via upload --- 100_projects/68-price-range-slider/index.html | 36 ++++++ 100_projects/68-price-range-slider/script.js | 40 +++++++ 100_projects/68-price-range-slider/style.css | 112 ++++++++++++++++++ 3 files changed, 188 insertions(+) create mode 100644 100_projects/68-price-range-slider/index.html create mode 100644 100_projects/68-price-range-slider/script.js create mode 100644 100_projects/68-price-range-slider/style.css diff --git a/100_projects/68-price-range-slider/index.html b/100_projects/68-price-range-slider/index.html new file mode 100644 index 0000000..3b4e9e5 --- /dev/null +++ b/100_projects/68-price-range-slider/index.html @@ -0,0 +1,36 @@ + + + + + document + + + + +
+
+

Price Range

+

enter min and max price

+
+
+
+ Min + +
+
-
+
+ Max + +
+
+
+
+
+
+ + +
+
+ + + \ No newline at end of file diff --git a/100_projects/68-price-range-slider/script.js b/100_projects/68-price-range-slider/script.js new file mode 100644 index 0000000..1496768 --- /dev/null +++ b/100_projects/68-price-range-slider/script.js @@ -0,0 +1,40 @@ +const rangeInput = document.querySelectorAll(".range-input input"), +priceInput = document.querySelectorAll(".price-input input"), +range = document.querySelector(".slider .progress"); +let priceGap = 1000; + +priceInput.forEach(input =>{ + input.addEventListener("input", e =>{ + let minPrice = parseInt(priceInput[0].value), + maxPrice = parseInt(priceInput[1].value); + + if((maxPrice - minPrice >= priceGap) && maxPrice <= rangeInput[1].max){ + if(e.target.className === "input-min"){ + rangeInput[0].value = minPrice; + range.style.left = ((minPrice / rangeInput[0].max) * 100) + "%"; + }else{ + rangeInput[1].value = maxPrice; + range.style.right = 100 - (maxPrice / rangeInput[1].max) * 100 + "%"; + } + } + }); +}); +rangeInput.forEach(input =>{ + input.addEventListener("input", e =>{ + let minVal = parseInt(rangeInput[0].value), + maxVal = parseInt(rangeInput[1].value); + + if((maxVal - minVal) < priceGap){ + if(e.target.className === "range-min"){ + rangeInput[0].value = maxVal - priceGap + }else{ + rangeInput[1].value = minVal + priceGap; + } + }else{ + priceInput[0].value = minVal; + priceInput[1].value = maxVal; + range.style.left = ((minVal / rangeInput[0].max) * 100) + "%"; + range.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%"; + } + }); +}); \ No newline at end of file diff --git a/100_projects/68-price-range-slider/style.css b/100_projects/68-price-range-slider/style.css new file mode 100644 index 0000000..4981338 --- /dev/null +++ b/100_projects/68-price-range-slider/style.css @@ -0,0 +1,112 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body{ + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: #17A2B8; +} +::selection{ + color: #fff; + background: #17A2B8; +} +.wrapper{ + width: 350px; + background: #fff; + border-radius: 10px; + padding: 20px 25px 40px; + box-shadow: 0 12px 35px rgba(0,0,0,0.1); +} +header h2{ + font-size: 24px; + font-weight: 600; +} +header p{ + margin-top: 5px; + font-size: 16px; +} +.price-input{ + width: 100%; + display: flex; + margin: 30px 0 35px; +} +.price-input .field{ + display: flex; + width: 100%; + height: 45px; + align-items: center; +} +.field input{ + width: 100%; + height: 100%; + outline: none; + font-size: 19px; + margin-left: 12px; + border-radius: 5px; + text-align: center; + border: 1px solid #999; + -moz-appearance: textfield; +} +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; +} +.price-input .separator{ + width: 130px; + display: flex; + font-size: 19px; + align-items: center; + justify-content: center; +} +.slider{ + height: 5px; + position: relative; + background: #ddd; + border-radius: 5px; +} +.slider .progress{ + height: 100%; + left: 25%; + right: 25%; + position: absolute; + border-radius: 5px; + background: #17A2B8; +} +.range-input{ + position: relative; +} +.range-input input{ + position: absolute; + width: 100%; + height: 5px; + top: -5px; + background: none; + pointer-events: none; + -webkit-appearance: none; + -moz-appearance: none; +} +input[type="range"]::-webkit-slider-thumb{ + height: 17px; + width: 17px; + border-radius: 50%; + background: #17A2B8; + pointer-events: auto; + -webkit-appearance: none; + box-shadow: 0 0 6px rgba(0,0,0,0.05); +} +input[type="range"]::-moz-range-thumb{ + height: 17px; + width: 17px; + border: none; + border-radius: 50%; + background: #17A2B8; + pointer-events: auto; + -moz-appearance: none; + box-shadow: 0 0 6px rgba(0,0,0,0.05); +} \ No newline at end of file