diff --git a/custom-range-slider/index.html b/custom-range-slider/index.html index ebc41e7..67d3654 100644 --- a/custom-range-slider/index.html +++ b/custom-range-slider/index.html @@ -1,18 +1,28 @@ - - - - - Custom Range Slider - - -

Custom Range Slider

-
- - + + + + + + Custom Range Slider + + + +

Custom Range Slider

+ +
+
+
+
+
-
+ +
+
+
+
+ + + - - - + \ No newline at end of file diff --git a/custom-range-slider/script.js b/custom-range-slider/script.js index 8fa6e72..776c166 100644 --- a/custom-range-slider/script.js +++ b/custom-range-slider/script.js @@ -1,27 +1,31 @@ -const range = document.getElementById('range') - -range.addEventListener('input', (e) => { - const value = +e.target.value - const label = e.target.nextElementSibling - - const range_width = getComputedStyle(e.target).getPropertyValue('width') - const label_width = getComputedStyle(label).getPropertyValue('width') - - const num_width = +range_width.substring(0, range_width.length - 2) - const num_label_width = +label_width.substring(0, label_width.length - 2) - - const max = +e.target.max - const min = +e.target.min - - const left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 10, -10) - - label.style.left = `${left}px` - - - label.innerHTML = value -}) - -// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers -const scale = (num, in_min, in_max, out_min, out_max) => { - return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; - } \ No newline at end of file +const decreaseBtn = document.querySelector('.decrease-btn'); +const increaseBtn = document.querySelector('.increase-btn'); +const slider = document.querySelector(".slider"); +const label = document.querySelector(".label"); +const allRanges = document.querySelectorAll(".range-container"); + +allRanges.forEach(wrap => { + slider.addEventListener("input", () => { + setLabel(slider, label); + }); +}); + +decreaseBtn.addEventListener('click', () => { + slider.value--; + setLabel(slider, label); + +}); +increaseBtn.addEventListener('click', () => { + slider.value++; + setLabel(slider, label); + +}); + +function setLabel(slider, label) { + const val = slider.value; + const min = slider.min ? slider.min : 0; + const max = slider.max ? slider.max : 100; + const newVal = Number(((val - min) * 100) / (max - min)); + label.innerHTML = val; + label.style.left = `calc(${newVal}% + (${17 - newVal}px))`; +} diff --git a/custom-range-slider/style.css b/custom-range-slider/style.css index b0951d3..0c90a9c 100644 --- a/custom-range-slider/style.css +++ b/custom-range-slider/style.css @@ -16,6 +16,21 @@ body { margin: 0; } +.label { + background-color: #fff; + width: 80px; + justify-content: center; + margin: auto; + padding: 5px 0; + border-radius: 4px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + text-align: center; + position: absolute; + left: 40%; + transform: translateX(-40%); + transform: translateY(-90%); +} + h2 { position: absolute; top: 10px; @@ -25,6 +40,35 @@ h2 { position: relative; } +.slider-settings { + display: flex; + justify-content: space-between; +} + +.slider-settings .adjust-btn { + width: 40px; + height: 40px; + font-size: 40px; + border-radius: 50%; + border: 1px solid #ddd; + text-align: center; + cursor: pointer; + line-height: 38px; +} + +.slider-settings .adjust-btn:hover { + background: purple; + color: #fff; +} + +.slider-settings .decrease-btn { + line-height: 38px; +} + +.slider-settings .increase-btn { + line-height: 38px; +} + input[type='range'] { width: 300px; margin: 18px 0; @@ -35,18 +79,6 @@ input[type='range']:focus { outline: none; } -input[type='range'] + label { - background-color: #fff; - position: absolute; - top: -25px; - left: 110px; - width: 80px; - padding: 5px 0; - text-align: center; - border-radius: 4px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); -} - /* Chrome & Safari */ input[type='range']::-webkit-slider-runnable-track { background: purple;