Я работаю над проектом Angular 6, в котором я использую Bootstrap.
Что я пытаюсь сделать: Пользователь должен иметь возможность указать количество человек для бронирования.Этот ввод должен быть сделан с помощью ползунка диапазона.Слайдер должен начинаться с 0 максимум с 30 людьми.
В настоящее время я добавил ползунок диапазона, используя эту строку HTML:
<h3>Value: {{personSliderValue}}</h3>
<input type="range" class="form-control-range" id="formControlRange"
value="0" min="0" max="30" #ref (change)="personSliderOnChange(ref.value)">
Вывод выглядит так: Текущее изображение на выходе
Поскольку я указал свойство value = "0", начальное значение ползунка равно 0 (желаемое поведение).Проблема заключается в том, что большой палец все еще находится в середине ползунка (поскольку ползунок находится в диапазоне от 0 до 30, он в настоящее время стоит на индексе 15, тогда как значение равно 0).Это очень неестественное поведение и сбивает с толку для пользователя.Когда я перемещаю большой палец, значения отображаются правильно. Я хочу отобразить большой палец в самом левом углу (с индексом 0), прежде чем произойдет какое-либо взаимодействие с пользователем.
Требуемый вывод: Требуемое изображение на выходе
Как мне изменить положение большого пальца?
Кстати, есть ли подробная документация для ползунков Bootstrap Range?Все, что я могу найти, это (что, на мой взгляд, не очень подробно): Диапазон начальной загрузки , Диапазон входных данных
Заранее спасибо!