调整范围的默认值

Question

我有一个滑块，允许用户根据他们在滑块中 select 的分辨率 select 报告的最佳版本（有多种原因我不想阅读我不想进入的实时分辨率，所以我选择了带有预定义选项的滑块）。这里的问题是，当他们 select 不同的分辨率时，报告会刷新，并且滑块会设置回默认值，这会显示误导性设置。

根据用户select的内容，我将索引值（0-4）存储在div id='getResolution'中。因此，如果用户 selects 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 - 帮我用 getResolution

中包含的值更新范围的 defaultValue

Answer 1

您在哪里找到默认值属性？

您需要将更改后的值存储到 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);
};

调整范围的默认值

Adjust defultValue of range

html

javascript

jquery

spotfire