以 1 为增量递增滑块答案

【问题标题】：Increment slider steps by one以 1 为增量递增滑块
【发布时间】：2017-03-09 06:11:35
【问题描述】：

我有一个简单的滑块，分为 24 个步骤 (0-23)，每个步骤代表一天中的一个小时。我的目标是为滑块 设置一次动画 以便每秒输入和滑块的值增加一 - 从 0 开始到 23 然后停止（总共 24 秒）。然后停止（循环结束）。

.map-overlay input {
    background-color: transparent;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0;
    cursor: ew-resize;
}

<div class='map-overlay-inner'>
    <h2>Passengers by hour</h2>
    <label id='variable'></label>
    <input id='slider' type='range' min='0' max='23' step='1' value='0' />
</div>

var variables = [ '0', '1', '2', '3', '4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23',
];

function filterBy(variable) {

    var filters = ['==', 'variable', variable];
    map.setFilter('circles', filters);
    map.setFilter('labels', filters);

    // Set the label to the hour
    document.getElementById('variable').textContent = variables[variable];
}
document.getElementById('slider').addEventListener('input', function(e) {
    var variable = e.target.value
    filterBy(variable);
});

此时，手动输入的值会改变为e.target.value

但是，当我实施此解决方案以将滑块移动一个时，textContent 并没有改变，并且由于某种原因滑块从 1 跳到 11。为什么会发生这种情况，谁能推荐一个解决方案？

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    document.getElementById("slider").value += 1;
}

【问题讨论】：

标签： javascript jquery slider

【解决方案1】：

这是因为document.getElementById("slider").value 的值是一个字符串。在控制台上，如果您运行"1" + 1，您将得到带有字符串类型的结果“11”。奇怪的是，尽管它是一个滑块，但它不会自动返回一个数字。

解决方法是尝试将值转换为数字。对于标签，由于您只希望其中包含文本，因此您可以将其 innerHTML 设置为滑块的值（假设这是您想要做的）：

var input = document.getElementById('slider');
var label = document.getElementById('variable');

//initialize label
label.innerHTML = input.value;

function myTimer() {
  var newValue = parseInt(input.value) + 1;
  input.value = newValue;
  label.innerHTML = newValue;
}

setInterval(myTimer, 1000);

<label id='variable'></label>
<input id='slider' type='range' min='0' max='23' step='1' value='0' />

至于数值的进展，试试以下方法：

var input = document.getElementById('slider');

// returns 0
input.value = 0;
console.log(input.value); 

// returns 1, because you give it a value of "01"
input.value += 1;
console.log(input.value); 


// returns 11, because you give it a value of "011"
input.value += 1;
console.log(input.value); 

// returns 23 because you give it a value of "111" but the max is 23
input.value += 1;
console.log(input.value);

【讨论】：

这修复了滑块问题，但filterBy() 功能不起作用，textContent 也没有变化。在这种情况下我应该如何更改.addEventListener('input', function(e)？
filterBy到底应该做什么？
它通过输入变量过滤地图上的两个图层
以编程方式更改输入值不会触发事件。你可以做的是在间隔内手动调用filterBy(newValue)，但前提是值改变了。如果这样做，则无需修改 filterBy 的功能。如果滑块被拖动，您仍然需要事件处理程序。

【解决方案2】：

你的代码有两个缺陷：

要增加滑块的值，请使用slider.stepUp()。你的线路 document.getElementById("slider").value += 1 不能作为因为该值是一个最初为“0”的字符串。在 Javascript，'0' + 1 评估为 '01'，随后为 '01' + 1 计算结果为 '011'，当转换为数字时，将被解释 11.
此外，input 事件仅在用户输入时触发，而不是在以编程方式更改滑块的值。在这种情况下，您可以例如手动调度 input 事件，然后由您的事件侦听器按预期处理。另见：Trigger change Event when the Input value changed Programatically?

另外，filterBy() 中的 map 对我来说是未定义的。

例子：

var slider = document.getElementById("slider");
var variable = document.getElementById('variable');

slider.addEventListener('input', function(e) {
    variable.textContent = slider.value;
});

var interval = setInterval(function() {
  slider.stepUp();
  slider.dispatchEvent(new Event('input'));
  if (slider.value == 23) clearInterval(interval);
}, 1000);

<label id='variable'></label>
<input id='slider' type='range' min='0' max='23' step='1' value='0' />

【讨论】：