tutorials/components/05_field_basic.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div style=\"float:left;margin:0 10px 10px 0\" markdown=\"1\">\n",
    "    <a href=\"index.ipynb\">\n",
    "        <img src=\"../../static/images/epyklogo_whole_small.png\">\n",
    "    </a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Field\n",
    "\n",
    "\n",
    "Field [component](00_components.ipynb) creation in Epyk will be using the property **fields** from the ui property.\n",
    "\n",
    "<i>the ui entry point will give you access to all the registered components.\n",
    "Different flavour of buttons are available in the framework.</i>\n",
    "\n",
    "## Basic fields"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<head>\n",
       "<style>\n",
       "    .cssdivnoborder {margin: 0 ;clear: both ;padding: 0 ;border: 0 ;}\n",
       ".cssselectstyle {padding-top: 2px ;background: #FFFFFF ;color: #000000 ;font-family: Calibri ;line-height: 23px ;font-size: 12px ;display: inline-block !IMPORTANT ;margin: 0 !IMPORTANT ;}\n",
       ".cssselectstyle:focus {outline: 0 ;border: none ;box-shadow: none ;}\n",
       ".cssselectbutton .btn {padding: 0 5px ;outline: none ;border-color: none ;box-shadow: none ;background-color: #e8f5e9 ;border: none ;color: #1b5e20 ;}\n",
       ".cssselectbutton .btn:focus {outline: none ;border-color: none ;box-shadow: none ;}\n",
       ".bootstrap-select .dropdown-toggle:focus {outline: 0 !important ;}\n",
       ".dropdown-item {margin: 0 ;padding: 0 5px ;}\n",
       ".dropdown-item:focus {outline: 0 ;}\n",
       ".dropdown-item:active {background-color: #3bb194 ;}\n",
       ".bs-searchbox input.form-control {outline: 0 ;margin-bottom: 5px ;border-color: #4caf50 ;height: 23px ;}\n",
       ".bs-searchbox input.form-control:focus {outline: 0 ;box-shadow: 0 0 0 0.2em #e8f5e9 ;}\n",
       ".selected {background: #e8f2ef !IMPORTANT ;color: #3bb194 !IMPORTANT ;}\n",
       ".dropdown-toggle {background-color: #e8f5e9 !IMPORTANT ;font-size: 12px !IMPORTANT ;}\n",
       ".csssdivboxmarginvertical {margin: 5px 0 ;}\n",
       ".filter-option-inner-inner {text-align: center}\n",
       ".select_2256988732048_width {width: 140px !IMPORTANT}\n",
       "</style>\n",
       "<link rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.13.0/css/all.css\" type=\"text/css\">\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css\" type=\"text/css\">\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.6/css/bootstrap-select.min.css\" type=\"text/css\">\n",
       "</head>\n",
       "<body>\n",
       "<label id=\"label_2256988777920\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:100px;height:auto;text-align:left;margin:0 5px;float:left;display:inline-block;line-height:23px;vertical-align:middle\" class=\"cssdivnoborder\">test</label><select data-width=\"140px\" data-live-search=\"true\" id=\"select_2256988732048\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:100%\" data-style=\"cssdivnoborder cssselectstyle cssselectbutton bootstrap-select .dropdown-toggle dropdown-item select_2256988732048_width\"><option value=\"\" id=\"option_2256988698416\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box\" class=\"cssdivnoborder\"></option><option value=\"Apple\" id=\"option_2256988698464\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box\" class=\"cssdivnoborder\">Apple</option><option value=\"Orange\" id=\"option_2256988698800\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box\" class=\"cssdivnoborder\">Orange</option></select><div id=\"fieldselect_2256988732000\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:100%;margin-top:2px\" class=\"cssdivnoborder\"><i title=\"select fruit\" id=\"help_2256988792192\" style=\"font-size:12px;cursor:pointer;float:right;margin:1px 4px;width:10px;line-height:23px\" class=\"csssdivboxmarginvertical fas fa-question-circle\"></i></div>\n",
       "<script>\n",
       "var jQuery = $;\n",
       "require.config({ paths:{popper: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min', selectBs: 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/js/bootstrap-select.min', fontawesome: 'https://use.fontawesome.com/releases/v5.13.0/js/fontawesome'}});\n",
       "require(['fontawesome', 'selectBs', 'popper'], function (fontawesome, selectBs, popper) { document.getElementById('fieldselect_2256988732000').insertBefore(document.getElementById('label_2256988777920'), document.getElementById('fieldselect_2256988732000').firstChild);document.getElementById('fieldselect_2256988732000').appendChild(document.getElementById('select_2256988732048'));$(document.getElementById('select_2256988732048')).selectpicker({\"container\": \"body\"}).selectpicker('refresh') })\n",
       "</script>\n",
       "<body>"
      ],
      "text/plain": [
       "<epyk.core.py.PyOuts.PyOuts at 0x20d7f02caf0>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from epyk.core.Page import Report\n",
    "\n",
    "rptObj = Report()\n",
    "\n",
    "a = rptObj.ui.fields.select([\"Apple\", 'Orange'], label=\"test\", helper=\"select fruit\", options={\"align\": 'center'})#\n",
    "a.input.attr[\"data-live-search\"] = \"true\"\n",
    "a.input.options.container = 'body'\n",
    "\n",
    "rptObj.outs.jupyter()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<head>\n",
       "<style>\n",
       "    .cssinput {border: 1px solid #e8f5e9 ;text-align: center ;cursor: text ;margin: 0 ;border-radius: 5px ;background: #e8f5e9 ;color: #000000 ;font-family: Calibri ;min-width: 140px ;line-height: 23px ;font-size: 12px ;}\n",
       ".cssinput:hover {color: #3bb194 ;}\n",
       ".cssinput:focus {outline: 0 ;}\n",
       ".cssdatepicker {font-family: inherit ;border: 1px solid #e8f5e9 ;cursor: pointer ;margin: 0 ;padding: 2px ;display: inline-block ;border-radius: 5px ;text-align: center ;background: #e8f5e9 ;color: #000000 ;}\n",
       ".cssdatepicker:hover {color: #1b5e20 ;}\n",
       ".cssdatepicker:focus {outline: 0 ;}\n",
       ".ui-datepicker {background: #e8f5e9 ;font-size: 12px ;}\n",
       ".ui-widget-header {background: #3bb194 ;}\n",
       ".cssdivnoborder {margin: 0 ;clear: both ;padding: 0 ;border: 0 ;}\n",
       "\n",
       "</style>\n",
       "<link rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.13.0/css/all.css\" type=\"text/css\">\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css\" type=\"text/css\">\n",
       "</head>\n",
       "<body>\n",
       "<input placeholder=\"\" type=\"text\" value=\"2020-04-08\" spellcheck=\"False\" id=\"inputdate_2256989032992\" style=\"font-size:12px;font-family:Calibri;box-sizing:border-box;width:140px;padding:0\" class=\"cssinput cssdatepicker ui-datepicker\" /><i aria-hidden=\"true\" id=\"icon_2256988968896\" style=\"font-size:12px;vertical-align:middle;display:inline-block;margin:auto 0;padding:auto 0;margin-right:5px;margin-left:5px;color:#3bb194;cursor:pointer\" class=\"cssdivnoborder far fa-calendar-alt\"></i><label id=\"label_2256988968848\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:100px;height:auto;text-align:left;margin:0 5px;float:left;display:inline-block;line-height:23px;vertical-align:middle;padding:2px 0\" class=\"cssdivnoborder\">Date</label><div id=\"datepicker_2256989039728\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;color:inherit;vertical-align:middle;display:block;width:auto;margin-top:2px\" class=\"cssdivnoborder\"></div>\n",
       "<script>\n",
       "var jQuery = $;\n",
       "require.config({ paths:{fontawesome: 'https://use.fontawesome.com/releases/v5.13.0/js/fontawesome', jQueryUi: 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min'}});\n",
       "require(['jQueryUi', 'fontawesome'], function (jQueryUi, fontawesome) { function InputDate(htmlObj, data, options){$(htmlObj).datepicker(options).datepicker('setDate', data)};document.getElementById('datepicker_2256989039728').insertBefore(document.getElementById('inputdate_2256989032992'), document.getElementById('datepicker_2256989039728').firstChild);document.getElementById('datepicker_2256989039728').appendChild(document.getElementById('icon_2256988968896'));document.getElementById('datepicker_2256989039728').insertBefore(document.getElementById('label_2256988968848'), document.getElementById('datepicker_2256989039728').firstChild);InputDate(document.getElementById('inputdate_2256989032992'), \"2020-04-08\", {dateFormat: \"yy-mm-dd\",beforeShowDay: function (date) {\n",
       "        var utc = date.getTime() - date.getTimezoneOffset()*60000; var newDate = new Date(utc); const dts = [\"2020-04-08\", \"2019-09-06\"];\n",
       "        ; if(!dts.includes(newDate.toISOString().split('T')[0])){return [false, '', '']} else {return [true, '', '']}\n",
       "      }});document.getElementById('icon_2256988968896').addEventListener('click', function(event){(function(){var clickEvent = new Event(\"click\"); document.getElementById('inputdate_2256989032992').focus(); document.getElementById('inputdate_2256989032992').dispatchEvent(clickEvent)})()}) })\n",
       "</script>\n",
       "<body>"
      ],
      "text/plain": [
       "<epyk.core.py.PyOuts.PyOuts at 0x20d7f012f40>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from epyk.core.Page import Report\n",
    "\n",
    "rptObj = Report()\n",
    "\n",
    "rptObj.ui.fields.date('2020-04-08', label=\"Date\").included_dates([\"2020-04-08\", \"2019-09-06\"])\n",
    "\n",
    "rptObj.outs.jupyter()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<head>\n",
       "<style>\n",
       "    .cssdivnoborder {margin: 0 ;clear: both ;padding: 0 ;border: 0 ;}\n",
       ".csssdivboxmarginvertical {margin: 5px 0 ;}\n",
       "\n",
       "</style>\n",
       "<link rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.13.0/css/all.css\" type=\"text/css\">\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css\" type=\"text/css\">\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css\" type=\"text/css\">\n",
       "</head>\n",
       "<body>\n",
       "<input placeholder=\"\" type=\"text\" value=\"20:23:57\" spellcheck=\"False\" id=\"inputtime_2256989229552\" style=\"font-size:12px;font-family:Calibri;box-sizing:border-box;width:139px;padding:0\" class=\"cssdivnoborder time\" /><i aria-hidden=\"true\" id=\"icon_2256989189984\" style=\"font-size:12px;vertical-align:middle;display:inline-block;margin:auto 0;padding:auto 0;margin-right:5px;margin-left:5px;color:#3bb194;cursor:pointer\" class=\"cssdivnoborder far fa-clock\"></i><label id=\"label_2256989189936\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:100px;height:auto;text-align:left;margin:0 5px;float:left;display:inline-block;line-height:23px;vertical-align:middle;padding:2px 0\" class=\"cssdivnoborder\">timestamp</label><div id=\"timepicker_2256989207616\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;color:red;vertical-align:middle;margin-top:2px\" class=\"cssdivnoborder\"><i title=\"This is the report timestamp\" id=\"help_2256989213312\" style=\"font-size:12px;cursor:pointer;float:none;margin:1px 4px;width:10px;margin-left:5px\" class=\"csssdivboxmarginvertical fas fa-question-circle\"></i></div>\n",
       "<script>\n",
       "var jQuery = $;\n",
       "require.config({ paths:{fontawesome: 'https://use.fontawesome.com/releases/v5.13.0/js/fontawesome', jQueryUi: 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min', jQueryTime: 'https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min'}});\n",
       "require(['jQueryUi', 'fontawesome'], function (jQueryUi, fontawesome) { require(['jQueryTime'], function (jQueryTime) { function InputTime(htmlObj, data, options){\n",
       "      if (typeof data == \"string\"){$(htmlObj).timepicker('setTime', data)} \n",
       "      $(htmlObj).timepicker(options); };document.getElementById('timepicker_2256989207616').insertBefore(document.getElementById('inputtime_2256989229552'), document.getElementById('timepicker_2256989207616').firstChild);document.getElementById('timepicker_2256989207616').appendChild(document.getElementById('icon_2256989189984'));document.getElementById('timepicker_2256989207616').insertBefore(document.getElementById('label_2256989189936'), document.getElementById('timepicker_2256989207616').firstChild);InputTime(document.getElementById('inputtime_2256989229552'), \"20:23:57\", {timeFormat: \"HH:mm:ss\"});document.getElementById('icon_2256989189984').addEventListener('click', function(event){(function(){var clickEvent = new Event(\"click\"); document.getElementById('inputtime_2256989229552').focus(); document.getElementById('inputtime_2256989229552').dispatchEvent(clickEvent)})()}) }) })\n",
       "</script>\n",
       "<body>"
      ],
      "text/plain": [
       "<epyk.core.py.PyOuts.PyOuts at 0x20d7e73cb50>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from epyk.core.Page import Report\n",
    "\n",
    "rptObj = Report()\n",
    "\n",
    "rptObj.ui.fields.time(label=\"timestamp\", color=\"red\", helper=\"This is the report timestamp\")\n",
    "\n",
    "rptObj.outs.jupyter()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<head>\n",
       "<style>\n",
       "    .cssinput {border: 1px solid #e8f5e9 ;text-align: center ;cursor: text ;margin: 0 ;border-radius: 5px ;background: #e8f5e9 ;color: #000000 ;font-family: Calibri ;min-width: 140px ;line-height: 23px ;font-size: 12px ;}\n",
       ".cssinput:hover {color: #3bb194 ;}\n",
       ".cssinput:focus {outline: 0 ;}\n",
       ".cssdivnoborder {margin: 0 ;clear: both ;padding: 0 ;border: 0 ;}\n",
       "\n",
       "</style>\n",
       "<link rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.13.0/css/all.css\" type=\"text/css\">\n",
       "</head>\n",
       "<body>\n",
       "<label id=\"label_2256989211808\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:100px;height:auto;text-align:left;margin:0 5px;float:left;display:inline-block;line-height:23px;vertical-align:middle\" class=\"cssdivnoborder\">Range Example</label><input placeholder=\"\" type=\"text\" value=\"\" spellcheck=\"False\" id=\"input_2256989209072\" style=\"font-size:12px;font-family:Calibri;box-sizing:border-box\" class=\"cssinput\" /><i aria-hidden=\"true\" id=\"icon_2256989271232\" style=\"font-size:12px;vertical-align:middle;display:inline-block;margin:auto 0;padding:auto 0;margin-right:5px;margin-left:5px;color:#3bb194\" class=\"cssdivnoborder fas fa-unlock-alt\"></i><div id=\"fieldinput_2256989208928\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:100%;margin-top:2px\" class=\"cssdivnoborder\"></div>\n",
       "<script>\n",
       "var jQuery = $;\n",
       "require.config({ paths:{fontawesome: 'https://use.fontawesome.com/releases/v5.13.0/js/fontawesome'}});\n",
       "require(['fontawesome'], function (fontawesome) { document.getElementById('fieldinput_2256989208928').insertBefore(document.getElementById('label_2256989211808'), document.getElementById('fieldinput_2256989208928').firstChild);document.getElementById('fieldinput_2256989208928').appendChild(document.getElementById('input_2256989209072'));document.getElementById('fieldinput_2256989208928').appendChild(document.getElementById('icon_2256989271232')) })\n",
       "</script>\n",
       "<body>"
      ],
      "text/plain": [
       "<epyk.core.py.PyOuts.PyOuts at 0x20d7f027970>"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from epyk.core.Page import Report\n",
    "\n",
    "rptObj = Report()\n",
    "\n",
    "rptObj.ui.fields.input(\"\", label=\"Range Example\", icon=\"fas fa-unlock-alt\")\n",
    "\n",
    "rptObj.outs.jupyter()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<head>\n",
       "<style>\n",
       "    .cssinput {border: 1px solid #e8f5e9 ;text-align: center ;cursor: text ;margin: 0 ;border-radius: 5px ;background: #e8f5e9 ;color: #000000 ;font-family: Calibri ;min-width: 140px ;line-height: 23px ;font-size: 12px ;}\n",
       ".cssinput:hover {color: #3bb194 ;}\n",
       ".cssinput:focus {outline: 0 ;}\n",
       ".cssdivnoborder {margin: 0 ;clear: both ;padding: 0 ;border: 0 ;}\n",
       "\n",
       "</style>\n",
       "\n",
       "</head>\n",
       "<body>\n",
       "<label id=\"label_2256989370976\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:100px;height:auto;text-align:left;margin:0 5px;float:left;display:inline-block;line-height:23px;vertical-align:middle\" class=\"cssdivnoborder\">readonly field</label><input placeholder=\"\" type=\"text\" value=\"\" spellcheck=\"False\" readonly=\"readonly\" id=\"input_2256989433712\" style=\"font-size:12px;font-family:Calibri;box-sizing:border-box\" class=\"cssinput\" /><div id=\"fieldinput_2256989433568\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:100%;margin-top:2px\" class=\"cssdivnoborder\"></div>\n",
       "<script>\n",
       "var jQuery = $;\n",
       "require.config({ paths:{}});\n",
       "document.getElementById('fieldinput_2256989433568').insertBefore(document.getElementById('label_2256989370976'), document.getElementById('fieldinput_2256989433568').firstChild);document.getElementById('fieldinput_2256989433568').appendChild(document.getElementById('input_2256989433712'))\n",
       "</script>\n",
       "<body>"
      ],
      "text/plain": [
       "<epyk.core.py.PyOuts.PyOuts at 0x20d7f0d1e20>"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from epyk.core.Page import Report\n",
    "\n",
    "rptObj = Report()\n",
    "\n",
    "rptObj.ui.fields.static(label=\"readonly field\")\n",
    "\n",
    "rptObj.outs.jupyter()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<head>\n",
       "<style>\n",
       "    .cssinput {border: 1px solid #e8f5e9 ;text-align: center ;cursor: text ;margin: 0 ;border-radius: 5px ;background: #e8f5e9 ;color: #000000 ;font-family: Calibri ;min-width: 140px ;line-height: 23px ;font-size: 12px ;}\n",
       ".cssinput:hover {color: #3bb194 ;}\n",
       ".cssinput:focus {outline: 0 ;}\n",
       ".cssdivnoborder {margin: 0 ;clear: both ;padding: 0 ;border: 0 ;}\n",
       "\n",
       "</style>\n",
       "\n",
       "</head>\n",
       "<body>\n",
       "<label id=\"label_2256989401824\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:100px;height:auto;text-align:left;margin:0 5px;float:left;display:inline-block;line-height:23px;vertical-align:middle\" class=\"cssdivnoborder\">test</label><input placeholder=\"\" type=\"number\" value=\"\" spellcheck=\"False\" id=\"inputinteger_2256989497328\" style=\"font-size:12px;font-family:Calibri;box-sizing:border-box\" class=\"cssinput\" /><div id=\"fieldinteger_2256989497184\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:100%;margin-top:2px\" class=\"cssdivnoborder\"></div>\n",
       "<script>\n",
       "var jQuery = $;\n",
       "require.config({ paths:{}});\n",
       "document.getElementById('fieldinteger_2256989497184').insertBefore(document.getElementById('label_2256989401824'), document.getElementById('fieldinteger_2256989497184').firstChild);document.getElementById('fieldinteger_2256989497184').appendChild(document.getElementById('inputinteger_2256989497328'))\n",
       "</script>\n",
       "<body>"
      ],
      "text/plain": [
       "<epyk.core.py.PyOuts.PyOuts at 0x20d7f012e50>"
      ]
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from epyk.core.Page import Report\n",
    "\n",
    "rptObj = Report()\n",
    "\n",
    "rptObj.ui.fields.integer(label=\"test\")\n",
    "\n",
    "rptObj.outs.jupyter()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<head>\n",
       "<style>\n",
       "    .cssinput {border: 1px solid #e8f5e9 ;text-align: center ;cursor: text ;margin: 0 ;border-radius: 5px ;background: #e8f5e9 ;color: #000000 ;font-family: Calibri ;min-width: 140px ;line-height: 23px ;font-size: 12px ;}\n",
       ".cssinput:hover {color: #3bb194 ;}\n",
       ".cssinput:focus {outline: 0 ;}\n",
       ".cssdivnoborder {margin: 0 ;clear: both ;padding: 0 ;border: 0 ;}\n",
       ".cssinputrange input {-webkit-appearance: none ;appearance: none ;outline: none ;opacity: 0.7 ;-webkit-transition: .2s ;transition: opacity .2s ;cursor: pointer ;background: #e8f5e9 ;}\n",
       ".cssinputrange input:hover {opacity: 1 ;}\n",
       ".cssinputrangethumb input {-webkit-appearance: none ;appearance: none ;cursor: pointer ;}\n",
       ".cssinputrangethumb input::-webkit-slider-thumb {-webkit-appearance: none ;appearance: none ;cursor: pointer ;background: #3bb194 ;width: 10px ;height: 10px ;}\n",
       "\n",
       "</style>\n",
       "<link rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.13.0/css/all.css\" type=\"text/css\">\n",
       "</head>\n",
       "<body>\n",
       "<label id=\"label_2256989576928\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:100px;height:auto;text-align:left;margin:0 5px;float:left;display:inline-block;line-height:23px;vertical-align:middle\" class=\"cssdivnoborder\">Range Example</label><input placeholder=\"\" type=\"range\" value=\"54\" spellcheck=\"False\" min=\"20\" max=\"100\" step=\"1\" oninput=\"output_2256989574432.value=this.value\" id=\"input_2256989519152\" style=\"font-size:12px;font-family:Calibri;box-sizing:border-box;vertical-align:middle\" class=\"cssinput\" /><output id=\"output_2256989574432\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:15px;text-align:center;margin-left:2px;color:#3bb194\">54</output><div placeholder=\"\" type=\"range\" value=\"54\" spellcheck=\"False\" id=\"inputrange_2256989453664\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;display:inline-block;vertical-align:middle;line-height:23px\" class=\"cssdivnoborder cssinputrange cssinputrangethumb\"></div><i aria-hidden=\"true\" id=\"icon_2256989553904\" style=\"font-size:12px;vertical-align:middle;display:inline-block;margin:auto 0;padding:auto 0;margin-right:5px;margin-left:5px;color:#3bb194\" class=\"cssdivnoborder fas fa-unlock-alt\"></i><div id=\"fieldrange_2256989453520\" style=\"font-size:inherit;font-family:inherit;box-sizing:border-box;width:100%;margin-top:2px\" class=\"cssdivnoborder\"></div>\n",
       "<script>\n",
       "var jQuery = $;\n",
       "require.config({ paths:{fontawesome: 'https://use.fontawesome.com/releases/v5.13.0/js/fontawesome'}});\n",
       "require(['fontawesome'], function (fontawesome) { document.getElementById('inputrange_2256989453664').appendChild(document.getElementById('input_2256989519152'));document.getElementById('inputrange_2256989453664').appendChild(document.getElementById('output_2256989574432'));document.getElementById('fieldrange_2256989453520').insertBefore(document.getElementById('label_2256989576928'), document.getElementById('fieldrange_2256989453520').firstChild);document.getElementById('fieldrange_2256989453520').appendChild(document.getElementById('inputrange_2256989453664'));document.getElementById('fieldrange_2256989453520').appendChild(document.getElementById('icon_2256989553904')) })\n",
       "</script>\n",
       "<body>"
      ],
      "text/plain": [
       "<epyk.core.py.PyOuts.PyOuts at 0x20d7f0d3f70>"
      ]
     },
     "execution_count": 15,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from epyk.core.Page import Report\n",
    "\n",
    "rptObj = Report()\n",
    "\n",
    "rptObj.ui.fields.range(54, min=20, label=\"Range Example\", icon=\"fas fa-unlock-alt\")\n",
    "\n",
    "rptObj.outs.jupyter()"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}