Example of Creating the RangeSlider Component

To execute the example, create an HTML page and perform the following operations:

1. Add a link to PP.css and PP.js files.

2. Within the <body> tag place a block with the ID "slider':

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

3. In the page within the <body> tag add a script that creates a control for values interval selection by moving sliders:

<script type="text/javascript">
    // Determine value range
    var range = {
        Begin: 10,
        End: 80
    }
    var slider = new PP.Ui.RangeSlider({
        ParentNode: document.getElementById("slider"), // Parent container
        Width: 400, // Item width
        Step: 10.65, // Slider step
        FractionCount: 2, // Number of digits after the comma to which the step value must be rounded
        MaxValue: 190, // Maximum value
        MinValue: 0, // Minimum value
        Range: range // Value range
    });
</script>

After the example execution a control used to select values interval by moving sliders is placed on the HTML page:

See also:

RangeSlider