Sanya-L
4 years ago
parent
40c60a70ce
commit
40aea03c1e
@ -1,18 +1,28 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="stylesheet" href="style.css" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Custom Range Slider</title>
|
<link rel="stylesheet" href="style.css" />
|
||||||
</head>
|
<title>Custom Range Slider</title>
|
||||||
<body>
|
</head>
|
||||||
<h2>Custom Range Slider</h2>
|
|
||||||
<div class="range-container">
|
<body>
|
||||||
<input type="range" id="range" min="0" max="100">
|
<h2>Custom Range Slider</h2>
|
||||||
<label for="range">50</label>
|
|
||||||
|
<div class="range-container">
|
||||||
|
<div class="label-display">
|
||||||
|
<label for="range" class="label">50</label>
|
||||||
</div>
|
</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')
|
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))`;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in new issue