Question

我正在尝试渲染当前输入范围的当前值，而无法渲染前一个值，因此如果滑块向后移动，则它不会在返回时显示当前值。我目前的方法是

<form name="registrationForm">
    <output name="ageOutputName" id="">24</output>
    <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="100" oninput="ageOutputId.value = ageInputId.value">
    <output name="ageOutputName" id="ageOutputId">24</output>
</form>

JSFiddle

我正在尝试将<input type="range">的当前值放入<output>标记中，但是当我转到滑块的左侧时，它无法显示较低的值，但是当我转到滑块的右侧，它可以正常工作。

所以我在这里想要实现的是增加input range时增加输出标签的值，而其他输出标签保持不变，并且当滑块范围减小时，其他输出标签应为与input range相同，即价值降低

Answer 1

从您的评论中我可以得出的结论是，我的目的是，当滑块向右移动时，右侧的output应该显示当前值；当它向左移动时，左侧的output应该显示当前值。

由于您希望根据滑块值是增加还是减少而采取不同的行为，因此需要保持先前的值左右，以便您可以与之进行比较。

下面的评论中的进一步说明：

// capture the initial value (as a number, not a string)
let prevValue = Number(ageInputId.value); 
// init both outputs:
ageOutputIncrease.value = prevValue;
ageOutputDecrease.value = prevValue

const showValue = function() {
  let newValue = Number(ageInputId.value);
  if (newValue > prevValue) {
    // slider is moving to the right
    ageOutputIncrease.value = newValue;
    // ageOutputDecrease.value = '';
  } else {
    // slider is moving to the left
    ageOutputDecrease.value = newValue;
    // ageOutputIncrease.value = '';
  }

  prevValue = newValue; // update prevValue for the next time
}

/* I set a fixed width on the outputs; otherwise the slider 
   itself moves around when the values change */
output {display:inline-block; width: 1.5em;}

<form name="registrationForm">
  <output id="ageOutputDecrease"></output>
  <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="100" oninput="showValue()">
  <output id="ageOutputIncrease">24</output>
</form>

输入范围当前值

1 个答案: