Example of Creating the GradientSlider Component

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:

GradientSlider