Данный плагин позволяет использовать поля ввода вместе с слайдером. Поддерживаются стандартные поля ввода и экземпляры класса PrettyInput. В теории может работать и без слайдера.
new InputRange(element: Node, options:Object = {});Свойства options:
- input:Node,PrettyInput - поле ввода. Может быть как Node, так и экземпляром класса PrettyInput. Если не указано, то будет использоваться первый найденный элементом с тегом input внутри element.
- range:Node - слайдер. Если не указан, то будет использоваться первый найденный .range-slider внутри element.
- min:int - минимальное значение в поле ввода. Влияет и на значение в поле ввода, и на слайдер. По умолчанию - 0.
- max:int - максимальное значение в поле ввода. Влияет и на значение в поле ввода, и на слайдер. По умолчанию - 100.
- onChange - функция, которая будет выполняться при изменении значения value
- onRangeChange - функция, которая будет выполняться при изменении значений min/max
- rangeParams:Object - объект настроек для noUiSlider. Если не задан, то берутся настройки из options.
Поддерживаются атрибуты для текстовых полей и .range-slider. Можно задать атрибуты data-max, data-min и data-step (только для .range-slider). Минимальное и максимальное значения текстового поля и слайдера должны соответствовать. Если значения min и max заданы в options, то проставлять их в атрибутах не нужно. Если этих значений нет в options, то сначала проверяется наличие этих атрибутов в input, а потом в .range-slider. Если атрибутов нет, то берется значение по-умолчанию.
Пример верстки:
<div>
<input type="text" data-min="10" data-max="1000">
<div class="range-slider" data-step="15"></div>
</div>- element: Node - возвращает элемент. Только для чтения
- input: Node - возвращает элемент текстового поля. Только для чтения
- slider: noUiSlider - возвращает noUiSlider. Только для чтения
- value: int - значение текстового поля
- min: int - минимальное значение
- max: int - максимальное значение