range-validation-stack.json

{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n    <div class=\"content-wrapper\">\n        <div class=\"control-label\">Numeric TextBox\n        </div>\n        <!-- Initialize Numeric Textbox -->\n        <input id=\"numeric\" type=\"text\">\n    </div>\n</div>\n\n\n\n\n<div class=\"col-lg-4 property-section\">\n    <table id=\"property\" title=\"Properties\">\n        <tbody><tr>\n            <td>\n                <div>Min Value </div>\n            </td>\n            <td>\n                <div>\n                    <input id=\"min\" type=\"number\" class=\"form-control\" value=\"10\">\n                </div>\n            </td>\n        </tr>\n        <tr>\n            <td>\n                <div>Max Value </div>\n            </td>\n            <td>\n                <div>\n                    <input id=\"max\" type=\"number\" class=\"form-control\" value=\"100\">\n                </div>\n            </td>\n        </tr>\n        <tr>\n            <td>\n                <div>Increment Step </div>\n            </td>\n            <td>\n                <div>\n                    <input id=\"step\" type=\"number\" max=\"100\" min=\"0\" class=\"form-control\" value=\"1\">\n                </div>\n            </td>\n        </tr>\n        <tr>\n            <td></td>\n            <td>\n                <div>\n                    <button id=\"buttonApply\" class=\"e-flat e-primary\">Apply</button>\n                </div>\n            </td>\n        </tr>\n    </tbody></table>\n</div>\n<style>\n    .property-panel-content {\n        padding: 0 10px 10px 0;\n    }\n    \n    .content-wrapper {\n        width: 48%;\n        margin: 0 auto;\n        min-width: 185px;\n    }\n    \n    .e-float-input.e-numeric.e-input-group {\n        margin-top: 40px;\n    }\n    \n    #buttonApply {\n        float: right;\n    }\n    \n    .control-label {\n        padding: 24px 0px 10px 0px;\n        font-size: 12px;\n    }\n</style></div></body></html>","index.js":"{{ripple}}\n    // Render numeric textbox with specific range\n    var numeric = new ej.inputs.NumericTextBox({\n        min: 10,\n        max: 100,\n        value: 15\n    });\n    numeric.appendTo('#numeric');\n    // Render Button control in properties panel\n    var buttonApply = new ej.buttons.Button();\n    buttonApply.appendTo('#buttonApply');\n    // After clicking apply button- 'min', 'max' and 'increment step' details will be received from properties panel\n    // and set it to Numeric Textbox.\n    document.getElementById('buttonApply').onclick = function () {\n        var min = parseFloat(document.getElementById('min').value);\n        var max = parseFloat(document.getElementById('max').value);\n        var step = parseFloat(document.getElementById('step').value);\n        numeric.min = min;\n        numeric.max = max;\n        numeric.step = step;\n    };\n\n"}