OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do I make it so that a value in a slider does not exceed a value from another slider?

  • Thread starter Thread starter AtomicO5
  • Start date Start date
A

AtomicO5

Guest
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:

Code:
<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:

Code:
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();

<p>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.</p>
<p>this is what I have currently for my sliders:</p>
<pre><code><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>
</code></pre>
<p>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.</p>
<p>Javascript:</p>
<pre><code>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();
</code></pre>
 

Latest posts

B
Replies
0
Views
1
Blundering Ecologist
B
Top