My input slider works fine upon onchange except 1 small problem is after I click on the button. The min and max values are fine. But the actual value like if it's 570 it should be closer to the right side because max will now be 600 and min will now be 400. It should only be centered if the value is 500.
I know I can change the value using elm.value = integer;
Thus why isn't the value of the range slider changing to the defined area corresponding to the min and max values?
var txt = document.getElementById('txt');
txt.onchange = function() {
$val = this.value;
if (this.value === this.max) {
this.max = parseFloat(parseFloat(100) + parseFloat($val));
this.min = parseFloat(parseFloat(-100) + parseFloat($val));
} else if (this.value === this.min) {
this.max = parseFloat(parseFloat(100) + parseFloat($val));
this.min = parseFloat(parseFloat(-100) + parseFloat($val));
}
output.textContent = this.value;
};
txt.onchange();
key.onclick = function() {
val = '570';
// round integer to nearest 100
valR = Math.round(val / 100) * 100;
// if value is greater than 0
txt.max = parseFloat(valR);
txt.min = parseFloat(parseFloat(-100) + parseFloat(valR));
this.value = val;
txt.onchange();
};<input id="txt" type="range" min="-100" max="100" value="0">
<span id="output"></span>
<button id="key">Get Data</button>lol the problem was I was calling this.value on my button's onclick function. I needed to declare the input element. Easy fix!
var txt = document.getElementById('txt');
txt.onchange = function() {
$val = this.value;
if (this.value === this.max) {
this.max = parseFloat(parseFloat(100) + parseFloat($val));
this.min = parseFloat(parseFloat(-100) + parseFloat($val));
} else if (this.value === this.min) {
this.max = parseFloat(parseFloat(100) + parseFloat($val));
this.min = parseFloat(parseFloat(-100) + parseFloat($val));
}
output.textContent = this.value;
};
txt.onchange();
key.onclick = function() {
val = '570';
// round integer to nearest 100
valR = Math.round(val / 100) * 100;
// if value is greater than 0
txt.max = parseFloat(valR);
txt.min = parseFloat(parseFloat(-100) + parseFloat(valR));
txt.value = val;
txt.onchange();
};<input id="txt" type="range" min="-100" max="100" value="0">
<span id="output"></span>
<button id="key">Get Data</button>