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

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

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

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

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

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

<script type="text/javascript">
    // Определим диапазон значений
    var range = {
        Begin: 10,
        End: 80
    }
    var slider = new PP.Ui.RangeSlider({
        ParentNode: document.getElementById("slider"), // Родительский контейнер
        Width: 400, // Ширина элемента
        Step: 10.65, // Шаг бегунка
        FractionCount: 2, // Количество знаков после запятой, до которых необходимо округлять значение шага
        MaxValue: 190, // Максимальное значение
        MinValue: 0, // Минимальное значение
        Range: range // Диапазон значений
    });
</script>

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

См. также:

RangeSlider