26 lines
1013 B
JavaScript
26 lines
1013 B
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const rangeInputs = document.querySelectorAll('input[type="range"]');
|
|
|
|
rangeInputs.forEach(rangeInput => {
|
|
// Get the maximum value
|
|
const max = rangeInput.max;
|
|
|
|
// Get the initial value; if not set, default to 0
|
|
const initialValue = rangeInput.value ? Number(rangeInput.value) : 0; // This may not work on all browsers. Firefox defaults this to 50
|
|
// console.log("initial val: " + initialValue);
|
|
|
|
const initialPercentage = (initialValue / max) * 100;
|
|
|
|
// Set the initial thumb position
|
|
rangeInput.style.setProperty('--value', `${initialPercentage}%`);
|
|
|
|
rangeInput.addEventListener('input', function () {
|
|
const value = rangeInput.value;
|
|
const percentage = (value / max) * 100;
|
|
|
|
// Update the width of the thumb based on the percentage
|
|
rangeInput.style.setProperty('--value', `${percentage}%`);
|
|
});
|
|
});
|
|
});
|