Alistair Norris Alistair Norris - 2 months ago 7
Javascript Question

rangeslider.js - not pulling correct value number in jquery

I'm using

rangeslider.js
to hide or show images based on whether the value sits within a bucket ( at this point; above or below 1500 ) and I'm getting a weird response.

My slider is set up like this:

<input id="sliderone"
type="range"
min="0" // default 0
max="3000" // default 100
step="1" // default 1
value="300" // default min + (max-min)/2
>


My javascript is like this

var sliders = document.querySelectorAll('input[type=range]');
var result = document.getElementById('js-result');
var values = getValues(sliders);

$(sliders).rangeslider({
polyfill: false
}).on('change', function() {
var values = getValues(sliders);
updateResult(result, values);
console.log(values);
});

$(sliders).rangeslider({
polyfill: false
}).on('change', function() {
var values = getValues(sliders);
updateResult(result, values);
console.log(values);
});

updateResult(result, values);

function newchangepic1() {
var newvalue = values[0];
console.log(newvalue);

if (newvalue < 1500) {
$(".img-one").attr("src","images/travel.png");
} else if ( newvalue > 1500) {
$(".img-one").attr("src","images/plant-color.png");
}
}

function newchangepic3() {
var newvalue = values[1];
console.log(newvalue);

if (newvalue < 1500) {
$(".img-two").attr("src","images/hdb.png");
} else if ( newvalue > 1500) {
$(".img-two").attr("src","images/plane.png");
}
}


When I do

console.log(values);


It prints my array as expected, updating with each movement.

var newvalue = values[0];
console.log(newvalue);


But when I try to read one of the values inside of the array I get 300. the initial value I set in HTML.

Array results - 300
I can't get my head around why this is happening but I'm a bad at coding, so am probably missing something.

Any help?

Answer
var values  = getValues(sliders);

$(sliders).rangeslider({
    polyfill: false
}).on('change', function() {
    values = getValues(sliders); //<---------
    updateResult(result, values);
    console.log(values);
});

$(sliders).rangeslider({
    polyfill: false
}).on('change', function() {
    values = getValues(sliders);//<---------
    updateResult(result, values);
    console.log(values);
});

You should probably not declare a local variable 'values' if you intend to use the global array to store the latest values.