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: