To execute the example, create an HTML page and perform the following operations:
1. Add a link to PP.css, PP.js and resources.ru.js files.
2. Within the <body> tag place a block with the slider identifier:
<div id="slider"></div>
3. In the page within the <body> tag add a script creating a control to chose the value gradient fill by moving sliders:
<script type="text/javascript"> // Determine path to the root folder containing resource files PP.resourceManager.setRootResourcesFolder("../resources/"); // Set language settings for resources PP.setCurrentCulture(PP.Cultures.ru); var slider = new PP.Ui.GradientSlider({ ParentNode: document.getElementById("slider"), // Parent container // Sliders Items: [{ Value: 0.25, Color: "#FFFFFF" }, { Value: 0.75, Color: "#FF0000" } ], Ticks: ["2001"], // Label Width: 500, // Item width ShowButtons: true // Attribute whether buttons of sliders adding and removing are visible }); </script>
After executing the example a control used to select a value by moving a gradient slider is added to the HTML page:
See also: