Cannot set value from localstorage

[sadikyalcin]

How can we populate the value of the slider from local storage? The "value" of the slider doesn't seem to be changing.

[andreruffert]

Hi @sadikyalcin! I guess it doesn't really have something to do with rangeslider.js itself but if u have some code how u trying to set the value from local storage I might help...

[sadikyalcin]

<input type="range" min="0" max="100" id="meetingProp" step="10" class="fader">

var prop = document.querySelector('#meetingProp');

this.loadData = function(el){
  if (typeof theKey !== 'undefined' && theKey !== null) {
    self.theData = localStorage.getItem(theKey);
    self.theData = JSON.parse(self.theData);
    return self.theData[el];
  }

  else {
    return false;
  }
};
...
var propValue = meetingsSpendSlide.loadData('meetingProp');
prop.value = propValue;

I have tried both leaving the value out and with value + value as {{key}} too. Guessing you can't set "value" via js or jquery? It's always half way.. The chart next to it with input is also being populated from js - so code is fine. The method for rangeslider is probably wrong. Apologies if this has already been answered. Couldn't find much around.

[andreruffert]

Some approaches:

Set the value before the rangeslider.js initialization

...

$element
  .val(getValueFromLocalStorage())
  .rangeslider({...});

Trigger a change event after setting the value

...

$element
  .val(getValueFromLocalStorage())
  .change();

Call rangeslider.js update method

...

$element[0].value = getValueFromLocalStorage();
$element.rangeslider('update', true);

[sadikyalcin]

Thanks @andreruffert I fixed my problem. I just needed to initialise range slider after I set the value just like you mentioned. Maybe it might not have an affect but for future reference, I have left out the value in HTML and do a basic check in JS when populating from localstorage. If empty set value = X ...

[andreruffert]

🎉