Merge pull request #2 from Sanya-L/developmentBranch
Added increase and decrease functionpull/82/head^2
rosewk
4 years ago
committed by
GitHub
commit
ea77dcdf43
@ -1,18 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Custom Range Slider</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Custom Range Slider</h2>
|
||||
<div class="range-container">
|
||||
<input type="range" id="range" min="0" max="100">
|
||||
<label for="range">50</label>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Custom Range Slider</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h2>Custom Range Slider</h2>
|
||||
|
||||
<div class="range-container">
|
||||
<div class="label-display">
|
||||
<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>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
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))`;
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue