Диапазон ограничивает возможный ввод без скрытия - PullRequest
Новая
       19

Диапазон ограничивает возможный ввод без скрытия

0 голосов
/ 05 ноября 2019

Как я могу реализовать ползунок диапазона с видимым минимумом, равным 0%, и максимумом, равным 100%, но ограничивающим возможные значения, например, от 10% до 90%? См. Прикрепленный пример.

Пример слайдера

1 Ответ

0 голосов
/ 06 ноября 2019

Для этого вам понадобится как HTML, так и CSS. Поскольку эта функция не реализована во входных данных «range», нам нужно создать наш пользовательский вариант.

Элемент input имеет атрибуты «max» и «min», это делает его намного проще, потому что мы можемуже установили минимум и максимум нашего диапазона, который составляет минимум 10% и максимум 90%.

Все, что нам нужно сделать сейчас, - это создать иллюзию того, что входной сигнал равен 100%, но на самом деле это не так. т.

Вот что я придумал:

.container {
  width: 100%;
}

.slidecontainer {
  display: flex;
}

.normalslide {
  width: 100%;
  background: #93cfed;
}

.limitedslide {
  width: 100%;
  background: #93cfed;
}
.limitedslide input {
  margin-left: 10%;
  max-width: calc(90% - 10%);
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  background: white;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 35px;
  height: 35px;
  background: #93cfed;
  cursor: pointer;
  border-radius: 100px;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}
<h1>Limited Range Slider</h1>

<div class="container">
  <p>Default range slider:</p>
  <div class="slidecontainer">
    <span>0%</span>
    <div class="normalslide">
      <input type="range" min="1" max="100" value="50" class="slider">
    </div>
    <span>100%</span>
  </div>
  
  <p>Limited range slider (min 10%, max 90%):</p>
  <div class="slidecontainer">
    <span>0%</span>
    <div class="limitedslide">
      <input type="range" min="10" max="90" value="50" class="slider">
    </div>
    <span>100%</span>
  </div>
</div>

Если вы хотите изменить минимальное и максимальное значения ползунка, просто измените минимальное и максимальное значения входа, затем измените «90%» и «10%». «значения класса« limitedslide »:

В HTML: 

<input type="range" min="10" max="90" value="50" class="slider">

В CSS (10% - это минимум, а 90% - это максимум): 

.limitedslide input {
  margin-left: 10%;
  max-width: calc(90% - 10%);
}
...