{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import param\n",
    "import panel as pn\n",
    "\n",
    "from panel.reactive import ReactiveHTML\n",
    "\n",
    "class MaterialBase(ReactiveHTML):\n",
    "    \n",
    "    __javascript__ = ['https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js']\n",
    "    \n",
    "    __css__ = ['https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css']\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Components\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class MaterialTextField(MaterialBase):\n",
    "    \n",
    "    value = param.String(default='')\n",
    "    \n",
    "    _template = \"\"\"\n",
    "    <label id=\"text-field\" class=\"mdc-text-field mdc-text-field--filled\">\n",
    "      <span class=\"mdc-text-field__ripple\"></span>\n",
    "      <span class=\"mdc-floating-label\">Label</span>\n",
    "      <input id=\"text-input\" type=\"text\" class=\"mdc-text-field__input\" aria-labelledby=\"my-label\" value=\"${value}\"></input>\n",
    "      <span class=\"mdc-line-ripple\"></span>\n",
    "    </label>\n",
    "    \"\"\"\n",
    "    \n",
    "    _dom_events = {'text-input': ['change']}\n",
    "    \n",
    "    _scripts = {\n",
    "        'render': \"mdc.textField.MDCTextField.attachTo(text_field);\"\n",
    "    }\n",
    "    \n",
    "class MaterialSlider(MaterialBase):\n",
    "    \n",
    "    end = param.Number(default=100)\n",
    "    \n",
    "    start = param.Number(default=0)\n",
    "    \n",
    "    value = param.Number(default=50)\n",
    "    \n",
    "    _template = \"\"\"\n",
    "    <div id=\"mdc-slider\" class=\"mdc-slider\" style=\"width: ${model.width}px\">\n",
    "      <input id=\"slider-input\" class=\"mdc-slider__input\" min=\"${start}\" max=\"${end}\" value=\"${value}\">\n",
    "      </input>\n",
    "      <div class=\"mdc-slider__track\">\n",
    "        <div class=\"mdc-slider__track--inactive\"></div>\n",
    "        <div class=\"mdc-slider__track--active\">\n",
    "          <div class=\"mdc-slider__track--active_fill\"></div>\n",
    "        </div>\n",
    "      </div>\n",
    "      <div class=\"mdc-slider__thumb\">\n",
    "        <div class=\"mdc-slider__thumb-knob\"></div>\n",
    "      </div>\n",
    "    </div>\n",
    "    \"\"\"\n",
    "    \n",
    "    _scripts = {        \n",
    "        'render': \"\"\"\n",
    "            slider_input.setAttribute('value', data.value)\n",
    "            state.slider = mdc.slider.MDCSlider.attachTo(mdc_slider)\n",
    "        \"\"\",\n",
    "        'value': \"\"\"\n",
    "            state.slider.setValue(data.value)\n",
    "        \"\"\"\n",
    "    }\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Examples"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "slider     = MaterialSlider(value=5, start=0, end=100, width=200)\n",
    "text_field = MaterialTextField()\n",
    "\n",
    "pn.Row(\n",
    "    pn.Column(\n",
    "        slider.controls(['value']),\n",
    "        slider\n",
    "    ),\n",
    "    pn.Column(\n",
    "        text_field.controls(['value']),\n",
    "        text_field\n",
    "    ),\n",
    ")"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}