при вводе диапазона, когда min и max равны, слайд должен быть просто точкой?

#javascript #html #css #reactjs

Вопрос:

 <input type="range" min="1" max="1" value="50">
 

Но это не точка:

введите описание изображения здесь

Как сделать его точкой?

Комментарии:

1. Я не понимаю, вы имеете в виду ползунок с формой, равной точке?

2. Почему вы хотите использовать слайдер таким образом, чтобы он вообще не использовался пользователем ? Как он может рассматривать допустимый вариант использования ? Предоставляя пользователю элемент, который нельзя использовать, и пользователь не может с ним взаимодействовать, это нарушает принцип удобства использования и доступности в Интернете. Если это динамическая форма, в которой вы можете управлять значениями, просто скройте элемент.

3. Я думаю, вам нужно будет использовать javascript, чтобы задать ширину ввода.

4. В этом случае я бы использовал флажок.

5. Точка? Вместо синего круга? Когда? Ваш вопрос мне непонятен.

Ответ №1:

Проверьте, поможет ли вам это ..

 window.onload=function(){
  var slider = document.getElementById('slider');
  if(parseInt(slider.getAttribute('min')) == parseInt(slider.getAttribute('max'))){
    slider.style.width=0;
  }
} 
 <input id="slider" type="range" min="1" max="1" value="50"> 

Ответ №2:

дайте удостоверение личности своему input

 <input type="range" min="1" max="1" id="rangeInput" />
 

Затем добавьте следующий код javascript для запуска на странице:

 const rangeInput = document.getElementById("rangeInput");
if (rangeInput.min === rangeInput.max) {
   rangeInput.style.width = "0px";
}
 

Ответ №3:

Насколько я понимаю, вам просто нужно установить его ширину равной нулю

 input{
  width: 0;
} 
 <input type="range" min="1" max="1" value="50"> 

Комментарии:

1. Я думаю, что это не сработает, если максимальное значение больше минимального значения