Пример создания компонента Slider

Для выполнения примера необходимо создать html-страницу и выполнить следующие действия:

1. Добавить ссылку на файлы PP.css и PP.js.

2. Внутри тега <body> разместить блок с идентификатором «slider»:

<div id="slider"></div>

3. Далее на страницу внутри тега <body> необходимо добавить сценарий, который создаёт элемент управления для выбора значения с помощью перемещения бегунков:

<script type="text/javascript">
    var slider = new PP.Ui.Slider({
        ParentNode: document.getElementById("slider"), // Родительский контейнер
        CanCross: false, // Признак того, что бегунки пересекаться не могут
        // Бегунки
        Items: [{
                Value: 0.25,
                PPType: "SliderItem",
                Id: "SliderItem1"
            }, {
                Value: 0.75,
                PPType: "SliderItem",
                Id: "SliderItem2"
            }
        ],
        MaxItemsCount: 3, // Максимальное количество бегунков
        MaxValue: 1, // Максимальное значение бегунков
        MinValue: 0, // Минимальное значение бегунков
        Orientation: PP.Orientation.Horizontal, // Ориентация компонента
        Ticks: ["2001", "2002", "2003"], // Метки
        Width: 500 // Ширина компонента
    });
</script>

В результате выполнения примера на html-странице будет размещен элемент управления для выбора значения с помощью перемещения бегунков:

См. также:

Slider