когда Html диапазон ввода 'step' не кратен значению 'max' диапазона - PullRequest
Новая
       7

когда Html диапазон ввода 'step' не кратен значению 'max' диапазона

0 голосов
/ 31 января 2020

У меня есть ситуация, когда шаг моего ползунка диапазона не кратен максимальному значению, поэтому значение ползунка идет только до 90, потому что следующий шаг будет больше 100. Фрагмент: 

<input min=0 max=100 step=15 value=0 id='my-slider' type="range" oninput='onChange()'/>
<label id='label'>0</label>

<script type="text/javascript">
function onChange(){
  const val = document.getElementById('my-slider').value;
  document.getElementById('label').innerText = val;

}
</script>

Моя проблема в том, что я хочу, чтобы ползунок достиг максимального значения (в данном случае 100), но я также хочу сохранить значение шага (15). желаемое поведение выглядит примерно так: 0 -> 15 -> 30 -> 45 -> 60 -> 75 -> 90 -> 100. Есть ли какой-нибудь простой способ добиться этого или лучше написать собственный слайдер с помощью javascript

1 Ответ

0 голосов
/ 31 января 2020

Не публикуйте значение ползунка напрямую и / или не обрабатывайте значение на сервере 

function onChange() {
  let val = document.getElementById('my-slider').value;
  val = val >= 100 ? 100 : val;
  document.getElementById('label').innerText = val;
  document.getElementById('actualValue').value = val;
  console.log(document.getElementById('actualValue').value); // remove this when happy
}
onChange()
<input type="hidden" id="actualValue" name="actualValue" value="" /><br/>
<input min=0 max=105 step=15 value=0 id='my-slider' type="range" oninput='onChange()' />
<label id='label'>0</label>
...