I am implementing a chart using chartjs and I am using two sliders to configure the x-axis value range for the data that I am showing through html and javascript but I cannot figure out how to limit and/or stop the sliders once the sliders values reach the same number.
this is what I have currently for my sliders:
<div class = "slidercontainer">
<div class = "range-slider">
<span class="slider-track"></span>
<input type="range" id="start" name="min-val" class="minvalue" min="1966" max="2022" value="1966" oninput="updateMin(this, 'end')">
<input type="range" id="end" name="max-val" class="maxvalue" min="1966" max="2022" value="2022" oninput="updateMax(this, 'start')">
<div class="slidernumformat">
<ln>Years: </ln>
<ln id="startYear">1966</ln>
<ln> - </ln>
<ln id="endYear">2022</ln>
</div>
</div>
</div>
I have tried to update the sliders by taking the id and putting it in the min or max values depending on which input I am trying to fix but it didn’t work.
Javascript:
const start = document.getElementById('start');
const end = document.getElementById('end');
start.max = 2022;
end.min = 1966;
function updateMin(range) {
console.log(range.value);
const minValue = labels.slice(parseInt(range.value) - 1966, parseInt(end.value) - 1965);
const dbMinValue = datapoints.slice(parseInt(range.value) - 1966, parseInt(end.value) - 1965);
myChart.config.data.labels = minValue;
myChart.config.data.datasets[0].data = dbMinValue;
end.min = parseInt(range.value);
document.getElementById('startYear').textContent = range.value; // update the start year
myChart.update();
}
function updateMax(range) {
console.log(range.value);
const maxValue = labels.slice(parseInt(start.value) - 1966, parseInt(range.value) - 1965);
const dbMaxValue = datapoints.slice(parseInt(start.value) - 1966, parseInt(range.value) - 1965);
myChart.config.data.labels = maxValue;
myChart.config.data.datasets[0].data = dbMaxValue;
start.max = parseInt(range.value);
document.getElementById('endYear').textContent = range.value; // update the end year
myChart.update();
}
function init() {
start.addEventListener('input', function(e) {
start.value = e.target.value;
updateMin(start);
});
end.addEventListener('input', function(e) {
end.value = e.target.value;
updateMax(end);
});
}
init();