слайдер Foundation

Слайдер Foundation позволяет пользователю выбрать диапазон значений путем перетаскивания:

Slider с помощью <div class="range-slider" data-slider> " слайдер данных> Создать. В <div> внутри, добавьте два <span> элемент: <span class="range-slider-handle"> Создать прямоугольный ползунок (голубой фон), <span class="range-slider-active-segment"> в слайдере серая полоса после области ползунка.

Примечание: слайдер требуется JavaScript. Таким образом, вы должны инициализировать oundation JS:

Сопряжение и отключить слайдер

Используйте .radius и .round классы , чтобы добавить закругленные углы ползунок. Используйте .disabled класс для отключения ползунка:

Вертикальный слайдер

Используйте .vertical-range классов и data-options="vertical: true;" ," чтобы создать вертикальный слайдер:

значение Slider

По умолчанию ползунок в середине (значение «50»). Вы можете добавить data-options="initial: num " " , чтобы изменить значение по умолчанию свойства:

Значение слайдер Дисплей

Если нам нужно перетащить значение ползунка , когда на дисплее в режиме реального времени, может быть получено <div> Добавьте data-options="display_selector:# id " идентификатор соответствует идентификатор атрибута и значение элемента ползунка, в качестве примеров:

Сочетание данных опций

В следующем примере используется display_selector и initial параметры данных:

Шаг? Длинные

По умолчанию, ползунок перемещается, чтобы уменьшить увеличение числа "1." Вы можете добавить data-options="step: num ;" ;" атрибут , чтобы изменить значение шага ?. Пример установлен в положение 25:

Пользовательский интервал

По умолчанию, значение в диапазоне от "0" до "100" Вы можете добавлять-Options Data start и end , чтобы установить значения интервала. Следующие примеры установки интервала значение "1" до "20":

Использование сетки

Используйте следующее использовать ползунок в сетке:

Используйте Input

В следующем примере используется <input> заменить <span> , чтобы отобразить значение ползунка: