Я помещаю ползунок в свою веб-форму, чтобы пользователи могли указать, насколько они хотели бы оценить определенную вещь.
Я использую Vue.js, и я не уверен, как настроить для этого v-модель и как получить введенное пользователем значение.
<div v-else class = "form-group">
<form action = "">
<label for = "formControlRange">Please drag the slider to decide how much you want to rate between 1 and 10</label>
<input type = "range" class = "form-control-range" id = "formControlRange">
</form>
<div>
Вам просто нужно добавить атрибут v-model во входные данные диапазона:
<input type = "range" class = "form-control-range" id = "formControlRange" v-model = "value">
И определите value
(как бы вы его ни называли) в своем компоненте.
...
data: {
value: 50 //initial value
}
Пример: http://jsfiddle.net/q0Lmv196/
Видимо есть возможность добавлять метки / метки к ползунку диапазона. Но в настоящее время ни один браузер не поддерживает эту функцию: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… Возможно, вам придется искать альтернативу (сторонний компонент - например, этот: npmjs.com/package/bootstrap-slider)
но я не могу показать на дисплее хотя бы `<h1> {{value}} </h1>`.
Хорошо, я неправильно понял это
Нет, это все еще было полезно, потому что я надеялся, что смогу добавить более приятный интерфейс на слайдер.
здорово, вы можете помочь мне отобразить числа на слайдере для пользователя?