Adjust defultValue of range

Question

I have a slider that allows users to select the best version of a report based on the resolution they select in the slider (There are various reasons I don't want to read the resolution in real time that I don't want to get into so I settled on a slider with predefined options). The problem here is when they select a different resolution, the report refreshes, and the slider is set back to the default value, which shows a misleading setting.

Based on what the user selects, I store the index value (0-4) in div id='getResolution'. So if a user selects 1366x768, that will contain the value 3. I then want to update the defaultValue of the input div to be 3 so when the page refreshes, it shows the right value. I have some code below, some of which may look funny to those not versed in how Spotfire does HTML. The concepts are all the same though.

The slider looks like this:

This is the initial code to set up the slider:

<div class="slideContainer" id="slideContainerID">
    <input class="sliderCustom" id="input" type="range" min="0" value="4" max="4" step="1" title="Use this slider to scale the report to your screen resolution">
    <div>Resolution: <span id="output"></span></div>

This is the javascript that I am using to pass things back to spotfire, change the text under the slider, and (hopefully) update the default value:

//get a handle on the range object
var input = document.getElementById('input'),
    output = document.getElementById('output');

//will contain the correct index value for the selection (0-4)
var defValue = document.getElementById('getResolution'); 

//array to show resolution selected
var resolution = ['1024x768','1280x800','1280x1024','1366x768','Full Size'];

//Trying to set the default value here. This is the code that doesn't seem to work
input.defaultValue = defValue.innerHTML; 

//When value changes, select the correct resolution from the array and pass that to Spotfire
//Pass the resolution string to innerHTML to show
input.oninput = function(){
    $("#kickResolution input").val(resolution[this.value]);
    $("#kickResolution input").focus();
    $("#kickResolution input").blur();
    output.innerHTML = resolution[this.value];
};
input.oninput(); 

tl;dr - Help me update the defaultValue of the range with the value contained in getResolution

Answer 1

Where did you find defaultValue property?

You need to store your changed value somewhere to localStorage for example:

input.value = localStorage.getItem('resolution');

input.oninput = function(){
    var value = resolution[this.value];
    $("#kickResolution input").val(value);
    $("#kickResolution input").focus();
    $("#kickResolution input").blur();
    output.innerHTML = value;
    localStorage.setItem('resolution', value);
};