Слайдер Foundation
Слайдер Foundation позволяет пользователям выбирать значение из диапазона перетаскиванием:
Слайдер можно создать с помощью<div class="range-slider" data-slider>Создать. В<div>Внутри добавьте два<span>Элемент:<span class="range-slider-handle">чтобы создать прямоугольный слайдер (синий фон),<span class="range-slider-active-segment">Это серая горизонтальная полоса за слайдером, которая является областью перетаскивания слайдера.
Примечание:Слайдер требует JavaScript. Поэтому вам нужно инициализировать Foundation JS:
Пример
<span class="range-slider-handle"></span>
<span class="range-slider-segment"></span>
</div>
<!-- Инициализировать Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Попробуйте сами »
скругленные углы и отключенный слайдер
Использование.radiusи.roundкласс для добавления слайдеров со скругленными углами. Используйте.disabledкласс для отключения слайдера:
Пример
<div class="range-slider radius" data-slider>...</div>
<div class="range-slider round" data-slider>...</div>
<div class="range-slider disabled" data-slider>...</div>
Попробуйте сами »
вертикальный слайдер
Использование.vertical-rangeкласс иdata-options="vertical: true;"к слайдеру:
Пример
<span class="range-slider-handle"></span>
<span class="range-slider-segment"></span>
</div>
Попробуйте сами »
значение слайдера
По умолчанию слайдер располагается посередине полосы (значение "50"). Это можно изменить, добавивdata-options="initial: num"атрибут для изменения значения по умолчанию:
Пример
<span class="range-slider-handle"></span>
<span class="range-slider-segment"></span>
</div>
Попробуйте сами »
отображение значения слайдера
Если нам нужно отображать значение в реальном времени при перетаскивании слайдера, мы можем сделать это, добавив его в
<div>Добавить вdata-options="display_selector:#id"атрибут, а значение id элемента совпадает с id слайдера, как в следующем примере:
Пример
<span id="mySlider"></span>
<div class="range-slider" data-slider data-options="display_selector: #mySlider;">
<span class="range-slider-handle"></span>
<span class="range-slider-segment"></span>
</div>
Попробуйте сами »
комбинированные параметры данных
В следующем примере используетсяdisplay_selectorиinitialпараметры данных:
Пример
<div class="range-slider" data-slider data-options="display_selector: #mySlider; initial: 20;">
<span class="range-slider-handle"></span>
<span class="range-slider-segment"></span>
</div>
Попробуйте сами »
шаг
По умолчанию величина увеличения или уменьшения при перемещении ползунка равна "1". Это можно изменить, добавивdata-options="step: num;"атрибут для изменения значения шага. В примере он установлен на 25:
Пример
<div class="range-slider" data-slider data-options="display_selector: #mySlider; step: 25;">
<span class="range-slider-handle"></span>
<span class="range-slider-segment"></span>
</div>
Попробуйте сами »
пользовательский диапазон
По умолчанию значение диапазона — от "0" до "100". Это можно изменить, добавив data-optionsstartиendчтобы установить значение диапазона. В следующем примере значение диапазона устанавливается от "1" до "20":
Пример
<div class="range-slider" data-slider data-options="display_selector: #mySlider; start: 1; end: 20;">
<span class="range-slider-handle"></span>
<span class="range-slider-segment"></span>
</div>
Попробуйте сами »
Использовать сетку
Ниже показано, как использовать слайдер в сетке:
Пример
<div class="small-10 columns">
<div class="range-slider" data-slider data-options="display_selector: #mySlider;">
<span class="range-slider-handle"></span>
<span class="range-slider-segment"></span>
</div>
</div>
<div class="small-2 columns">
<!-- Элемент отображения (Совет: используйте CSS, чтобы точно позиционировать его) -->
<span id="mySlider" style="display:block;margin-top:14px;"></span>
</div>
</div>
Попробуйте сами »
Использовать поле ввода
В следующем примере используется<input>замена<span>для отображения значения слайдера:
Пример
<div class="small-10 columns">
<div class="range-slider" data-slider data-options="display_selector: #mySlider; initial: 72;">
<span class="range-slider-handle"></span>
<span class="range-slider-segment"></span>
</div>
</div>
<div class="small-2 columns">
<!-- Элемент отображения (Совет: используйте CSS, чтобы точно позиционировать его) -->
<input type="number" id="mySlider" style="margin-top:7px;" value="72">
</div>
</div>
Попробуйте сами »