调整范围的值

Question

我有一个滑块，允许用户根据他们在滑块中选择的分辨率来选择最佳报告版本（出于各种原因，我不想实时读取分辨率，这是我不想要的进入，因此我选择了带有预定义选项的滑块）。这里的问题是，当他们选择其他分辨率时，报表将刷新，并且滑块被设置回默认值，这会显示令人误解的设置。

根据用户的选择，我将索引值（0-4）存储在div id='getResolution'中。因此，如果用户选择1366x768，则将包含值3。然后，我想将输入div的defaultValue更新为3，以便在页面刷新时显示正确的值。我在下面有一些代码，对于那些不熟悉Spotfire如何做HTML的人来说，其中一些可能看起来很有趣。但是，这些概念都是相同的。

滑块看起来像这样：

这是设置滑块的初始代码：

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

这是我用来将内容传递回Spotfire，更改滑块下的文本以及（希望）更新默认值的javascript：

//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 -帮我用defaultValue

中包含的值更新范围的getResolution

Answer 1

您在哪里找到defaultValue属性？

例如，您需要将更改的值存储到localStorage的某个位置：

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);
};