msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

Merge pull request #2 from Sanya-L/developmentBranch

Browse Source 
Added increase and decrease function
pull/82/head^2
rosewk 4 years ago committed by GitHub
parent 40c60a70ce 40aea03c1e
commit ea77dcdf43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 99 additions and 53 deletions
Show Stats Download Patch File Download Diff File

22
custom-range-slider/index.html
Unescape View File

@ -1,18 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<title>Custom Range Slider</title> <title>Custom Range Slider</title>
</head> </head>
<body>
<body>
<h2>Custom Range Slider</h2> <h2>Custom Range Slider</h2>
<div class="range-container"> <div class="range-container">
<input type="range" id="range" min="0" max="100"> <div class="label-display">
<label for="range">50</label> <label for="range" class="label">50</label>
</div>
<div class="slider-settings">
<div class="adjust-btn decrease-btn">-</div>
<input type="range" class="slider" min="0" max="100" step="1">
<div class="adjust-btn increase-btn">+</div>
</div>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

58
custom-range-slider/script.js
Unescape View File

@ -1,27 +1,31 @@
const range = document.getElementById('range') const decreaseBtn = document.querySelector('.decrease-btn');
const increaseBtn = document.querySelector('.increase-btn');
range.addEventListener('input', (e) => { const slider = document.querySelector(".slider");
const value = +e.target.value const label = document.querySelector(".label");
const label = e.target.nextElementSibling const allRanges = document.querySelectorAll(".range-container");
const range_width = getComputedStyle(e.target).getPropertyValue('width') allRanges.forEach(wrap => {
const label_width = getComputedStyle(label).getPropertyValue('width') slider.addEventListener("input", () => {
setLabel(slider, label);
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 decreaseBtn.addEventListener('click', () => {
const min = +e.target.min slider.value--;
setLabel(slider, label);
const left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 10, -10)
});
label.style.left = `${left}px` increaseBtn.addEventListener('click', () => {
slider.value++;
setLabel(slider, label);
label.innerHTML = value
}) });
// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers function setLabel(slider, label) {
const scale = (num, in_min, in_max, out_min, out_max) => { const val = slider.value;
return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; 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))`;
}

56
custom-range-slider/style.css
Unescape View File

@ -16,6 +16,21 @@ body {
margin: 0; 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 { h2 {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -25,6 +40,35 @@ h2 {
position: relative; 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'] { input[type='range'] {
width: 300px; width: 300px;
margin: 18px 0; margin: 18px 0;
@ -35,18 +79,6 @@ input[type='range']:focus {
outline: none; 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 */ /* Chrome & Safari */
input[type='range']::-webkit-slider-runnable-track { input[type='range']::-webkit-slider-runnable-track {
background: purple; background: purple;

Write Preview
Loading…
Cancel
Save