css html5范围滑块：输出标签不反映自定义JavaScript代码所选值

efzxgjgh 于 2022-12-15 发布在 HTML5

关注(0)|答案(1)|浏览(153)

我已经使用了一个代码从this answer风格HTML5输入在我的GRAV CMS网站。
HTML标记的呈现部分：

<div class="form-data" data-grav-field="range" data-grav-disabled="" data-grav-default="40">
  <div class="form-input-wrapper ">
    <input name="data[space]" value="40" type="range" style="display: inline-block;vertical-align: middle;" oninput="space_output.value = space.value" min="40" max="350" step="10" class="form-input " id="space" required="required">
    <output name="data[space]" id="space_output" style="display: inline-block;vertical-align: baseline;padding: 0 0.5em 5px 0.5em;"> 40 </output>
  </div>
</div>

JS代码取自上面的答案，并放在custom.js文件的开头：

document.getElementById("space").oninput = function() {
  var value = (this.value-this.min)/(this.max-this.min)*100
  this.style.background = 'linear-gradient(to right, #eec170 0%, #eea624 ' + value + '%, #839788 ' + value + '%, #a6d86c 100%)'                           
};

所以，这部分工作没有任何缺陷。

问题是：

JS代码的输入行为是不正确的，一旦页面加载背景颜色不反映球的位置默认位置40，因为它不是中心。一旦滑块位置改变，背景颜色的变化取决于滑块的位置。
这是次要的问题，但主要的问题是<output>字段不再显示新的值。它一直粘在40上。如何修复它？
第一节第一节第一节第一节第一次

css

来源：https://stackoverflow.com/questions/74786105/html5-range-slider-the-output-label-doesnt-reflect-chosen-value-with-custom-ja

1条答案

按热度按时间

zzlelutf1#

试试这个例子，我为calculate range增加了一个（隐藏的）输入，并用form标签 Package 它以从输出中获取值，我还增加了样式，并将梯度计算重构为javascript。

document.addEventListener('DOMContentLoaded', function() {
  const slider = document.getElementById('range');

  // Calculate gradient persent (0% - 100%)
  const calcGradientPersent = value => (100 * value) / 360;

  // Default value when load page
  const initValue = slider.value;
  let persent = calcGradientPersent(initValue);

  // Set default inline style
  slider.style.background = `linear-gradient(to right, #eec170 0%, #eea624 ${persent}%, #839788 ${persent}%, #a6d86c 100%)`;

  // Input Range handler
  slider.addEventListener('input', event => {
    // Get value from input
    const value = event.target.value;
    persent = calcGradientPersent(value);
    // Update inline style
    slider.style.background = `linear-gradient(to right, #eec170 0%, #eea624 ${persent}%, #839788 ${persent}%, #a6d86c 100%)`;
  });
});

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input[type='range'] {
  appearance: none;
  border-radius: 1rem;
}

input[type='range']:focus {
  outline: none;
}

input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.4rem;
  cursor: pointer;
  border-radius: 1rem;
  border: 1px solid #eea624;
}

input[type='range']::-webkit-slider-thumb {
  height: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid gray;
  background: #d8d7f3;
  cursor: pointer;
  appearance: none;
  margin-top: -0.35rem;
}

<div class="form-data" data-grav-field="range" data-grav-disabled="" data-grav-default="40">
  <form oninput="result.value=parseInt(range.value)+parseInt(step.value)" class="form-input-wrapper">
    <input name="range" value="40" type="range" style="display: inline-block; vertical-align: middle" min="0" max="350" step="10" class="form-input" id="range" required="required" />
    <input type="number" id="step" value="0" hidden />
    <output name="result" id="space_output" for="range step" style="display: inline-block; vertical-align: baseline; padding: 0 0.5em 5px 0.5em">
          40
     </output>
  </form>
</div>

赞(0）回复(0）举报 2022-12-15

我来回答

css html5范围滑块：输出标签不反映自定义JavaScript代码所选值

1条答案

相关问题

热门标签

最新问答