This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathlimits-plnkr.json
More file actions
1 lines (1 loc) · 33 KB
/
limits-plnkr.json
File metadata and controls
1 lines (1 loc) · 33 KB
1
{"index.css":"","app/property-pane.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nexport class PropertyPane extends React.Component<{ title: string }, {}>{\r\n\r\n render() {\r\n return (\r\n <div className='property-panel-section'>\r\n <div className=\"property-panel-header\">\r\n {this.props.title}\r\n </div>\r\n <div className=\"property-panel-content\">\r\n {this.props.children}\r\n </div>\r\n </div>\r\n\r\n )\r\n }\r\n}\r\n","systemjs.config.js":"System.config({\r\n transpiler: \"ts\",\r\n typescriptOptions: {\r\n target: \"es5\",\r\n module: \"commonjs\",\r\n moduleResolution: \"node\",\r\n emitDecoratorMetadata: true,\r\n experimentalDecorators: true,\r\n \"jsx\": \"react\"\r\n },\r\n meta: {\r\n 'typescript': {\r\n \"exports\": \"ts\"\r\n },\r\n '*.json': { loader: 'plugin-json' }\r\n },\r\n paths: {\r\n \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n map: {\r\n app: 'app',\r\n ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\", \r\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\", \r\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n },\r\n packages: {\r\n 'app': { main: 'index', defaultExtension: 'tsx' },\r\n }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Slider · Limits · Essential JS 2 for React · Syncfusion</title>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n <!-- {{:meta}} -->\r\n <meta name=\"author\" content=\"Syncfusion\" />\r\n <script type=\"text/javascript\">\r\n var themeName = location.hash || 'material';\r\n themeName = themeName.replace('#','');\r\n window.ripple = (themeName === \"material\")\r\n document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n </script>\r\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n <script src=\"systemjs.config.js\"></script>\r\n <link href=\"index.css\" rel=\"stylesheet\" />\r\n <style>\r\n #loader {\r\n color: #008cff;\r\n height: 40px;\r\n left: 45%;\r\n position: absolute;\r\n top: 45%;\r\n width: 30%;\r\n }\r\n body {\r\n touch-action:none;\r\n }\r\n .body {\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n }\r\n\r\n .e-view {\r\n bottom: 0;\r\n left: 0;\r\n overflow: hidden;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n .sb-left {\r\n float: left;\r\n }\r\n\r\n .sb-right {\r\n float: right;\r\n }\r\n\r\n .sb-block {\r\n display: block;\r\n }\r\n\r\n .sb-table {\r\n display: table;\r\n }\r\n\r\n .sb-table-cell {\r\n display: table-cell;\r\n vertical-align: middle;\r\n }\r\n\r\n /*sample header*/\r\n\r\n\r\n .sb-header {\r\n height: 48px;\r\n background: #FFFFFF;\r\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n z-index: 1001;\r\n opacity: 100;\r\n }\r\n\r\n\r\n .sb-header-left, .sb-header-right {\r\n height: 100%;\r\n }\r\n\r\n #sb-header-text {\r\n padding-left: 22px;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n .header-logo {\r\n float: left;\r\n padding-left: 8px;\r\n padding-right: 22px;\r\n }\r\n\r\n .footer-logo {\r\n background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n height: 40px;\r\n width: 140px;\r\n }\r\n\r\n .sb-header-splitter {\r\n float: left;\r\n border-left: 1px solid rgb(196, 196, 196);\r\n height: 32px;\r\n margin-top: 8px;\r\n padding-left: 22 px;\r\n }\r\n\r\n .sb-header-settings {\r\n display: none;\r\n }\r\n\r\n .product-style a{\r\n padding-right: 15px;\r\n font-family:Roboto;\r\n font-weight: 500;\r\n font-size: 13px;\r\n color: #363636;\r\n text-align: center;\r\n text-decoration: none;\r\n }\r\n .product-style a:hover {\r\n color:#3C78EF;\r\n }\r\n\r\n .sb-download-btn a {\r\n text-decoration: none;\r\n }\r\n\r\n .sb-download-text {\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-wrapper {\r\n padding-right: 27px;\r\n }\r\n\r\n .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n border-radius: 2px;\r\n font-family: \"Roboto\";\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-btn:hover {\r\n background: #006CE6;\r\n }\r\n\r\n .sb-download-btn:focus {\r\n background: #0051CB;\r\n }\r\n\r\n .sb-download-btn.active {\r\n background: #0036B1;\r\n }\r\n\r\n .sb-download-btn {\r\n background-color: #3C78EF;\r\n opacity: 100;\r\n border-radius: 2px;\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n font-weight: 500;\r\n line-height: 18px;\r\n height: 32px;\r\n border-color: transparent;\r\n }\r\n\r\n .sb-bread-crumb {\r\n padding-left: 20px;\r\n padding-top: 24px;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .category-allcontrols a, .category-text a, .crumb-sample {\r\n display: table;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #3C78EF;\r\n text-align: left;\r\n text-decoration: none;\r\n }\r\n\r\n .sb-bread-crumb .sb-bread-crumb-text>div {\r\n font-size: 15px;\r\n font-weight: 500;\r\n padding-right: 8px;\r\n cursor: default;\r\n display: table-cell;\r\n }\r\n\r\n .sb-bread-crumb-text>div.seperator {\r\n font-weight: 700;\r\n font-size: 15px;\r\n vertical-align: bottom;\r\n } \r\n\r\n .content {\r\n overflow: auto;\r\n height: calc(100% - 50px);\r\n top: 50px;\r\n }\r\n\r\n\r\n .sample-content {\r\n top: 48px;\r\n background: #FFFFFF;\r\n }\r\n\r\n .div {\r\n display: block;\r\n }\r\n\r\n .control-section {\r\n padding-left: 4px;\r\n }\r\n\r\n .crumb-sample {\r\n color: #000000;\r\n line-height: 18px;\r\n }\r\n\r\n #description {\r\n padding-bottom: 16px;\r\n padding-left: 20px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n padding-top: 14px;\r\n }\r\n\r\n #action-description {\r\n padding-left: 20px;\r\n padding-bottom: 15px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n #description-section {\r\n padding-left: 20px;\r\n padding-top: 30px;\r\n opacity: 0.87;\r\n font-family:Roboto;\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n\r\n\r\n </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n <div class=\"sample-browser\">\r\n <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n <div class='sb-header-left sb-left sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"header-logo\">\r\n <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n <div class=\"footer-logo\"> </div>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div id='sb-header-text' class='e-sb-header-text'>\r\n \r\n <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class='sb-header-right sb-right sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class='product-style'>\r\n <div><a href=\"https://www.syncfusion.com/products/react/slider\">PRODUCT DETAILS</a></div>\r\n </div>\r\n </div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n <button id=\"download-now\" class=\"sb-download-btn\">\r\n <span class=\"sb-download-text\">DOWNLOAD</span>\r\n </button>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class ='content e-view'>\r\n <div class='sample-content'>\r\n <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n <div class=\"sb-bread-crumb-text\">\r\n <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/slider/default.html\"><span>Slider</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">Limits</div>\r\n </div>\r\n </div>\r\n <div class=\"control-content\">\r\n <div id=\"action-description\">\r\n <p>\r\n \n <p>This sample demonstrates the rendering of Slider component with limits. Drag the thumb over the bar for selecting the\n values between assigned limit values. Change the values in the property pane to set different limit values.</p>\n\n \r\n </p>\r\n </div>\r\n <div class=\"container-fluid\">\r\n <div class=\"control-section\">\r\n <div id='sample'>\r\n <div id='loader'>Loading....</div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div id=\"description-section\">Description</div> \r\n <div id=\"description\">\r\n <p>\r\n \n <p>\n The limits are used to limit between certain range. When the limits are assigned, draggable limited area will be\n in the dark shadow color of the current theme. The limits APIs are explained below.\n </p>\n <p>\n <table>\n <tbody><tr>\n <td>\n <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/slider/api-limitData.html?lang=es6#minstart\">minStart</a>\n </td>\n <td>\n -   Used to set minimum limit value for first handle.\n </td>\n </tr>\n <tr>\n <td>\n <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/slider/api-limitData.html?lang=es6#minend\">minEnd</a>\n </td>\n <td>\n -   Used to set maximum limit value for first handle.\n </td>\n </tr>\n <tr>\n <td>\n <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/slider/api-limitData.html?lang=es6#maxstart\">maxStart</a>\n </td>\n <td>\n -   Used to set minimum limit value for second handle.\n </td>\n </tr>\n <tr>\n <td>\n <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/slider/api-limitData.html?lang=es6#maxend\">maxEnd</a>\n </td>\n <td>\n -   Used to set maximum limit value for first handle.\n </td>\n </tr>\n <tr>\n <td>\n <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/slider/api-limitData.html?lang=es6#starthandlefixed\">startHandleFixed</a>\n </td>\n <td>\n -   Used to lock the first handle in the current position.\n </td>\n </tr>\n <tr>\n <td>\n <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/slider/api-limitData.html?lang=es6#endhandlefixed\">endHandleFixed</a>\n </td>\n <td>\n -   Used to lock the second handle in the current position.\n </td>\n </tr>\n </tbody></table>\n </p>\n <p> In this demo, Limits with MinRange and range Slider is demonstrated.</p>\n <ul>\n <li>MinRange Slider – In this sample, the minimum and maximum limit of the slider is set to 10 and 40 respectively.</li>\n <li>Range Slider – In this sample, the minimum and maximum limit of the first handle is set to 10 and 40 respectively\n and the minimum and maximum limit of the second handle is set to 60 and 90 respectively.\n </li>\n </ul>\n <p>For more information, refer to the <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/slider/limits.html?lang=es6\">limits</a> section from the documentation.</p>\n \r\n </p> \r\n </div> \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n</body>\r\n</html>\r\n","app/index.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { SliderComponent, NumericTextBoxComponent, ChangeEventArgs as textboxChange } from '@syncfusion/ej2-react-inputs';\r\nimport { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';\r\nimport { SampleBase } from './sample-base';\r\nimport { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';\r\nimport { ChangeEventArgs as buttonChangeEvent } from '@syncfusion/ej2-buttons';\r\nimport { PropertyPane } from './property-pane';\r\nimport { TooltipDataModel, TicksDataModel, LimitDataModel } from '@syncfusion/ej2-inputs';\r\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\r\n\r\nconst slidercss = ` \r\n.content-wrapper {\r\n width: 52%;\r\n margin: 0 auto;\r\n min-width: 185px;\r\n}\r\n\r\n.sliderwrap {\r\n margin-top: 45px;\r\n}\r\n.e-bigger .content-wrapper {\r\n width: 80%;\r\n}\r\n.sliderwrap label {\r\n padding-bottom: 50px;\r\n font-size: 13px;\r\n font-weight: 500;\r\n margin-top: 15px;\r\n}\r\n.userselect {\r\n -webkit-user-select: none;\r\n /* Safari 3.1+ */\r\n -moz-user-select: none;\r\n /* Firefox 2+ */\r\n -ms-user-select: none;\r\n /* IE 10+ */\r\n user-select: none;\r\n /* Standard syntax */\r\n}\r\n.property-custom td {\r\n padding: 5px;\r\n}\r\n.property-custom .property-panel-content {\r\n height: 320px;\r\n}\r\n\r\n`\r\nexport class Limits extends SampleBase<{}, {}> {\r\n // Instance of the control\r\n private minRangeObj: SliderComponent;\r\n private rangeObj: SliderComponent;\r\n private minStartObj: NumericTextBoxComponent;\r\n private minEndObj: NumericTextBoxComponent;\r\n private maxStartObj: NumericTextBoxComponent;\r\n private maxEndObj: NumericTextBoxComponent;\r\n\r\n private fixOneObj: CheckBoxComponent;\r\n private fixTwoObj: CheckBoxComponent;\r\n\r\n\r\n // Initialize ticks with placement, largestep, smallstep\r\n private ticks: TicksDataModel = { placement: 'After', largeStep: 20, smallStep: 5, showSmallTicks: true };\r\n private tooltip: TooltipDataModel = { isVisible: true, placement: 'Before' };\r\n private minRangeLimits: LimitDataModel = { enabled: true, minStart: 10, minEnd: 40 };\r\n private rangeLimits: LimitDataModel = { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 };\r\n\r\n private minStart(args: textboxChange) {\r\n this.minRangeObj.limits.minStart = args.value;\r\n this.rangeObj.limits.minStart = args.value;\r\n }\r\n\r\n private minEnd(args: textboxChange) {\r\n this.minRangeObj.limits.minEnd = args.value;\r\n this.rangeObj.limits.minEnd = args.value;\r\n }\r\n\r\n private maxStart(args: textboxChange) {\r\n this.minRangeObj.limits.maxStart = args.value;\r\n this.rangeObj.limits.maxStart = args.value;\r\n }\r\n\r\n private maxEnd(args: textboxChange) {\r\n this.minRangeObj.limits.maxEnd = args.value;\r\n this.rangeObj.limits.maxEnd = args.value;\r\n }\r\n\r\n private fixOneChange(args: buttonChangeEvent) {\r\n this.minRangeObj.limits.startHandleFixed = args.checked;\r\n this.rangeObj.limits.startHandleFixed = args.checked;\r\n }\r\n\r\n private fixTwoChange(args: buttonChangeEvent) {\r\n this.minRangeObj.limits.endHandleFixed = args.checked;\r\n this.rangeObj.limits.endHandleFixed = args.checked;\r\n }\r\n\r\n public refreshTooltip(e: any): void {\r\n if (!isNullOrUndefined(document.getElementById('minrange')) &&\r\n !isNullOrUndefined((document.getElementById('minrange') as any).ej2_instances[0]) &&\r\n !isNullOrUndefined(document.getElementById('range')) &&\r\n !isNullOrUndefined((document.getElementById('range') as any).ej2_instances[0])) {\r\n (document.getElementById('minrange') as any).ej2_instances[0].refreshTooltip();\r\n (document.getElementById('range') as any).ej2_instances[0].refreshTooltip();\r\n }\r\n }\r\n\r\n render() {\r\n if (!isNullOrUndefined(document.getElementById('right-pane'))) {\r\n document.getElementById('right-pane').addEventListener('scroll', this.refreshTooltip);\r\n }\r\n return (\r\n <div className='control-pane'>\r\n <div className='control-section'>\r\n <div className='col-lg-8'>\r\n <div className=\"content-wrapper\">\r\n <style>{slidercss}</style>\r\n <div className='sliderwrap'>\r\n <label>MinRange Slider With Limits</label>\r\n {/* Initialize Slider Component with ticks with placement, largestep, smallstep */}\r\n <SliderComponent id='minrange' value={25} min={0} max={100} ticks={this.ticks} limits={this.minRangeLimits} ref={(slider) => { this.minRangeObj = slider }} tooltip={this.tooltip} />\r\n </div>\r\n <div className='sliderwrap'>\r\n <label>Range Slider With Limits</label>\r\n {/* Initialize Range Slider Component with ticks with placement, largestep, smallstep */}\r\n <SliderComponent id='range' value={[25, 75]} min={0} max={100} type='Range' limits={this.rangeLimits} ticks={this.ticks} tooltip={this.tooltip} ref={(slider) => { this.rangeObj = slider }} />\r\n </div>\r\n </div>\r\n </div>\r\n <div id=\"#slider_event\" className='col-lg-4 property-section property-custom'>\r\n <PropertyPane title='Properties'>\r\n <table id=\"property\" title=\"Properties\">\r\n <tbody>\r\n <tr>\r\n <td style={{ width: '50%' }}>\r\n <div className=\"userselect\">MinStart</div>\r\n </td>\r\n <td style={{ width: '50%' }}>\r\n <NumericTextBoxComponent value={10} min={0} max={100} change={this.minStart.bind(this)} ref={(obj) => {\r\n this.minStartObj = obj;\r\n }} />\r\n </td>\r\n </tr>\r\n <tr>\r\n <td style={{ width: '50%' }}>\r\n <div className=\"userselect\">MinEnd</div>\r\n </td>\r\n <td style={{ width: '50%' }}>\r\n <NumericTextBoxComponent value={40} min={0} max={100} change={this.minEnd.bind(this)} ref={(obj) => {\r\n this.minEndObj = obj;\r\n }} />\r\n </td>\r\n </tr>\r\n <tr>\r\n <td style={{ width: '50%' }}>\r\n <div className=\"userselect\">MaxStart</div>\r\n </td>\r\n <td style={{ width: '50%' }}>\r\n <NumericTextBoxComponent value={60} min={0} max={100} change={this.maxStart.bind(this)} ref={(obj) => {\r\n this.maxStartObj = obj;\r\n }} />\r\n </td>\r\n </tr>\r\n <tr>\r\n <td style={{ width: '50%' }}>\r\n <div className=\"userselect\">MaxEnd</div>\r\n </td>\r\n <td style={{ width: '50%' }}>\r\n <NumericTextBoxComponent value={90} min={0} max={100} change={this.maxEnd.bind(this)} ref={(obj) => {\r\n this.maxEndObj = obj;\r\n }} />\r\n </td>\r\n </tr>\r\n <tr>\r\n <td style={{ width: '50%' }}>\r\n <div className=\"userselect\">Lock First Handle</div>\r\n </td>\r\n <td style={{ width: '50%' }}>\r\n <CheckBoxComponent ref={(scope) => { this.fixOneObj = scope; }} change={this.fixOneChange.bind(this)} />\r\n </td>\r\n </tr>\r\n <tr>\r\n <td style={{ width: '50%' }}>\r\n <div className=\"userselect\">Lock Second Handle</div>\r\n </td>\r\n <td style={{ width: '50%' }}>\r\n <CheckBoxComponent ref={(scope) => { this.fixTwoObj = scope; }} change={this.fixTwoChange.bind(this)} />\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </PropertyPane>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n )\r\n }\r\n}\r\n\nReactDOM.render(<Limits />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n public rendereComplete(): void {\r\n /**custom render complete function */\r\n }\r\n componentDidMount(): void {\r\n setTimeout(() => {\r\n this.rendereComplete();\r\n }\r\n );\r\n }\r\n}"}