Example of Creating the Slider 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 slider identifier:

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

3. Next within the <body> tag add a script that creates a control for selecting values by moving sliders:

<script type="text/javascript">
    var slider = new PP.Ui.Slider({
        ParentNode: document.getElementById("slider"), // Parent container
        CanCross: false, // The attribute that sliders cannot be intercrossed
        // Sliders
        Items: [{
                Value: 0.25,
                PPType: "SliderItem",
                Id: "SliderItem1"
            }, {
                Value: 0.75,
                PPType: "SliderItem",
                Id: "SliderItem2"
            }
        ],
        MaxItemsCount: 3, // Maximum number of sliders
        MaxValue: 1, // Maximum value of sliders
        MinValue: 0, // Minimum value of sliders
        Orientation: PP.Orientation.Horizontal, // Component orientation
        Ticks: ["2001", "2002", "2003"], // Ticks
        Width: 500 // Component width
    });
</script>

After executing the example the HTML page contains a control for selecting a value by moving sliders:

See also:

Slider