Документация / Виджеты /

Слайдер

ZForms.Widget → ZForms.Widget.Container → ZForms.Widget.Container.Slider → ZForms.Widget.Container.Slider.Vertical

Виджет слайдера создается на основе элемента <fieldset> или любого другого HTML-контейнера. Представляет из себя контейнер, к которому можно добавить виджеты, каждый из которых будет поставлен в соответствие ползунку слайдера. Существует две разновидности слайдера — горизонтальный (ZForms.Widget.Container.Slider) и вертикальный (ZForms.Widget.Container.Slider.Vertical).

В качестве дочерних виджетов для слайдера могут использоваться только виджета типа «Числовое поле». Добавление других виджетов будет проигнорировано.

Определение виджета

Виджет определяется по дополнительному CSS-классу zf-slider, например: <fieldset class="zf zf-slider" />. В случае вертикального слайдера, виджет определяется по дополнительному CSS-классу zf-slidervertical, например: <fieldset class="zf zf-slidervertical" />

Параметры инициализации

oOptions : {
	Array aSlideRules : [
		{
			Number dValue   : 0,
			Number dPercent : 0,
			Number dStep    : 1,
			String sLabel   : '0'
		},
		{
			Number dValue   : 100,
			Number dPercent : 100,
			Number dStep    : 1,
			String sLabel   : '100'
		}
		]
	}

Параметр aSlideRules определяет правила, которым подчиняется шкала слайдера. Представляет собой массив объектов отсечек на слайдере (слева направо для горизонтального слайдера и снизу вверх для вертикального), каждый из которых содержит:

  • dValue — значение отсечки на шкале слайдера.
  • dPercent — процент, который будет занимать данная отсечка от ширины/высоты шкалы слайдера. Используется для неравномерной шкалы на слайдере. У первой отсечки всегда равен 0, у последней 100.
  • dStep — шаг шкалы от текущей отсечки до следующей. У последней отсечки игнорируется.
  • sLabel — подпись на шкале, соответствующая отсечке.

Пример

Обычный слайдер
Вертикальный слайдер
Слайдер с двумя ползунками и неравномерной шкалой

Код примера

<form class="zf" action=".">
	<fieldset class="zf zf-slider">
		<legend><span>Обычный слайдер</span></legend>
		<dl>
			<dt><label for="input-number">Значение</label></dt>
			<dd><input class="zf zf-number" type="text" name="number" id="input-number" value="50" size="3" /></dd>
		</dl>
	</fieldset>
	<fieldset class="zf zf-slidervertical" onclick="return { oOptions : { aSlideRules : [{ dValue : 0, dPercent : 0, dStep : 10, sLabel : 'очень тихо' }, { dValue : 700, dPercent : 70, dStep : 10, sLabel : 'громко' }, { dValue : 1000, dPercent : 100, dStep : 1, sLabel : 'очень громко' }] } }">
		<legend><span>Вертикальный слайдер</span></legend>
		<dl>
			<dt><label for="input-number2">Значение</label></dt>
			<dd><input class="zf zf-number" type="text" id="input-number2" value="30" size="3" /></dd>
		</dl>
	</fieldset>
	<fieldset class="zf zf-slider zf-range" onclick="return { oOptions : { aSlideRules : [{ dValue : 0, dPercent : 20, dStep : 10, sLabel : '0' }, { dValue : 100, dPercent : 50, dStep : 20, sLabel : 'половина шкалы' }, { dValue : 1000, dPercent : 100, dStep : 1, sLabel : '1000' }] } }">
		<legend><span>Слайдер с&#160;двумя ползунками и&#160;неравномерной шкалой</span></legend>
		<dl>
			<dt><label for="input-number-from">От</label></dt>
			<dd><input class="zf zf-number" type="text" name="number-from" id="input-number-from" value="30" size="4" /></dd>
		</dl>
		<dl>
			<dt><label for="input-number-to">До</label></dt>
			<dd><input class="zf zf-number" type="text" name="number-from" id="input-number-to" value="600" size="4" /></dd>
		</dl>
	</fieldset>
</form>

Внешний вид слайдеров полностью настраивается через таблицы стилей CSS.