Documentation

range

Используется для создания HTML 5 слайдера типа <input type="range">

Обзор блока

Модификаторы блока

Модификатор	Допустимые значения	Способы использования	Описание
theme	'islands'	BEMJSON	Стилевое оформление.

Специализированные поля блока

Поле	Тип	Значение по умолчанию	Описание
title	String	-	Заголовок слайдера.
val	Number	-	Начальное значение слайдера. Это поле отправляется на сервер.
min	Number	0	Минимальное значение слайдера.
max	Number	100	Минимальное значение слайдера.
displayedValue	Object	-	Тип элемента, который отображает текущее значение слайдера.

Описание блока

Блок range предоставляет возможность изменять, содержимое и внешний вид HTML 5 слайдеров.

Модификаторы блока

Модификатор theme

Допустимое значение: 'islands'.

Способ использования: BEMJSON.

Отвечает за стилевое оформление блока.

{
    block : 'range',
    mods : { theme : 'islands' },
    title : 'Тема islands'
}

Специализированные поля блока

Поле title

Тип: String.

Задает заголовок слайдера.

{
    block : 'range',
    title : 'Слайдер:'
}

Поле val

Тип данных: Number.

Определяет значение слайдера, которое будет отправлено на сервер.

{
    block : 'range',
    title : 'Слайдер:',
    val : 10
}

Поле min

Тип: Number.

Определяет минимальное значение слайдера.

{
    block : 'range',
    title : 'Слайдер:'
    min : 0,
    val : 10
}

Поле max

Тип: Number.

Определяет максимальное значение слайдера.

{
    block : 'range',
    title : 'Слайдер:'
    max : 100,
    val : 10
}

Поле displayedValue

Тип: Object.

Определяет тип отображения текущего значения слайдера. Поля объекта будут развернуты в модификаторы элемента value. В качестве ключа в объекте используется имя 'type'. Значением этого ключа может быть одно из ключевых слов:

1. 'static' - статичное отображение значения справа от слайдера;
2. 'tooltip' - значение отображается с помощью тултипа, при изменении значения слайдера.

{
    block: 'range',
    title: 'Слайдер:',
    min: 50,
    max: 100,
    val: 60,
    displayedValue: { type: 'static' }
}

{
    block: 'range',
    title: 'Слайдер:',
    min: 50,
    max: 100,
    val: 60,
    displayedValue: { type: 'tooltip' }
}