Question

const sliderInput = document.querySelector('input');
const sliderTracker = document.querySelector('.slider-tracker span');

const minusBtn = document.querySelector('.minus');
const plusBtn = document.querySelector('.plus');

minusBtn.addEventListener('click', function() {
  console.log(sliderInput.value)
  sliderInput.value -= 0.25;
  renderTooltip();
  console.log(sliderInput.value)
});

plusBtn.addEventListener('click', function() {
  console.log(sliderInput.value)
  sliderInput.value += 0.25;
  renderTooltip();
  console.log(sliderInput.value)
})

function renderTooltip() {
  sliderTracker.innerHTML = sliderInput.value
}

<input class="slider" type="range" name="slider" min="0.5" max="3" value="1.5" step="0.25">
<div class="slider-tracker"><span>0.5</span></div>

<button class="minus">subtract</button>
<button class="plus">add</button>

Link to Codepen

我在手动更改范围输入的值时遇到问题。

如果我从值中减去，一切都会按预期工作（它会减小我正确指定的值），但是，当我尝试向输入中添加时，出现了问题。它要么达到1.75的最大值，要么有时会跳过步骤而一路跳至3。

有人可以告诉我这里发生了什么吗？谢谢。

Answer 1

问题是值是一个字符串，因此您要添加一个字符串加一个数字。因此，您需要将字符串更改为数字，而不是添加字符串。

const sliderInput = document.querySelector('input');
const sliderTracker = document.querySelector('.slider-tracker span');

const minusBtn = document.querySelector('.minus');
const plusBtn = document.querySelector('.plus');

minusBtn.addEventListener('click', function() {
  console.log(sliderInput.value)
  sliderInput.value -= 0.25;
  renderTooltip();
  console.log(sliderInput.value)
});

plusBtn.addEventListener('click', function() {
  console.log(typeof sliderInput.value, sliderInput.value, )
  sliderInput.value = +sliderInput.value + 0.25;
  renderTooltip();
  console.log(sliderInput.value)
})

function renderTooltip() {
  sliderTracker.innerHTML = sliderInput.value
}

<input class="slider" type="range" name="slider" min="0.5" max="3" value="1.5" step="0.25">
<div class="slider-tracker"><span>0.5</span></div>

<button class="minus">subtract</button>
<button class="plus">add</button>

Answer 2

我猜是因为有时您碰到了最小和最大限制，并且控件无法反映这些限制，但是该值仍保留在内存中，因此，下次单击它时，它仍然必须递增或递减以使您重新进入范围。

您可以通过将最小值/最大值构建到增量/减量逻辑中来解决此问题。

const sliderInput = document.querySelector('input');
const sliderTracker = document.querySelector('.slider-tracker span');

const minusBtn = document.querySelector('.minus');
const plusBtn = document.querySelector('.plus');

var value = 1.5;

minusBtn.addEventListener('click', function() {
  console.log(sliderInput.value)
  value = Math.max(0.5, value - 0.25)
  sliderInput.value = value;
  renderTooltip();
  console.log(sliderInput.value)
});

plusBtn.addEventListener('click', function() {
  console.log(sliderInput.value)
  value = Math.min(3, value + 0.25);
  sliderInput.value = value;
  renderTooltip();
  console.log(sliderInput.value)
})

function renderTooltip() {
  sliderTracker.innerHTML = sliderInput.value
}

<input class="slider" type="range" name="slider" min="0.5" max="3" value="1.5" step="0.25">
<div class="slider-tracker"><span>0.5</span></div>

<button class="minus">subtract</button>
<button class="plus">add</button>

手动添加到HTML范围输入会产生意外结果

2 个答案: