{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true,
    "nbsphinx": "hidden"
   },
   "source": [
    "[Index](Index.ipynb) - [Back](Widget List.ipynb) - [Next](Widget Styling.ipynb)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Widget Events"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## Special events"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "from __future__ import print_function"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "The `Button` is not used to represent a data type.  Instead the button widget is used to handle mouse clicks.  The `on_click` method of the `Button` can be used to register function to be called when the button is clicked.  The doc string of the `on_click` can be seen below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Register a callback to execute when the button is clicked.\n",
      "\n",
      "        The callback will be called with one argument, the clicked button\n",
      "        widget instance.\n",
      "\n",
      "        Parameters\n",
      "        ----------\n",
      "        remove: bool (optional)\n",
      "            Set to true to remove the callback from the list of callbacks.\n",
      "        \n"
     ]
    }
   ],
   "source": [
    "import ipywidgets as widgets\n",
    "print(widgets.Button.on_click.__doc__)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Example"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "Since button clicks are stateless, they are transmitted from the front-end to the back-end using custom messages.  By using the `on_click` method, a button that prints a message when it has been clicked is shown below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "9cdef1f1216f4ae08225bcf64fc47f1b"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from IPython.display import display\n",
    "button = widgets.Button(description=\"Click Me!\")\n",
    "display(button)\n",
    "\n",
    "def on_button_clicked(b):\n",
    "    print(\"Button clicked.\")\n",
    "\n",
    "button.on_click(on_button_clicked)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### on_submit"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "The `Text` widget also has a special `on_submit` event.  The `on_submit` event fires when the user hits return."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "cab0a6538a00491f95c48e77707e9ad8"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "text = widgets.Text()\n",
    "display(text)\n",
    "\n",
    "def handle_submit(sender):\n",
    "    print(text.value)\n",
    "\n",
    "text.on_submit(handle_submit)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## Traitlet events"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "Widget properties are IPython traitlets and traitlets are eventful.  To handle  changes, the `observe` method of the widget can be used to register a callback.  The doc string for `observe` can be seen below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Setup a handler to be called when a trait changes.\n",
      "\n",
      "        This is used to setup dynamic notifications of trait changes.\n",
      "\n",
      "        Parameters\n",
      "        ----------\n",
      "        handler : callable\n",
      "            A callable that is called when a trait changes. Its\n",
      "            signature should be ``handler(change)``, where ``change`` is a\n",
      "            dictionary. The change dictionary at least holds a 'type' key.\n",
      "            * ``type``: the type of notification.\n",
      "            Other keys may be passed depending on the value of 'type'. In the\n",
      "            case where type is 'change', we also have the following keys:\n",
      "            * ``owner`` : the HasTraits instance\n",
      "            * ``old`` : the old value of the modified trait attribute\n",
      "            * ``new`` : the new value of the modified trait attribute\n",
      "            * ``name`` : the name of the modified trait attribute.\n",
      "        names : list, str, All\n",
      "            If names is All, the handler will apply to all traits.  If a list\n",
      "            of str, handler will apply to all names in the list.  If a\n",
      "            str, the handler will apply just to that name.\n",
      "        type : str, All (default: 'change')\n",
      "            The type of notification to filter by. If equal to All, then all\n",
      "            notifications are passed to the observe handler.\n",
      "        \n"
     ]
    }
   ],
   "source": [
    "print(widgets.Widget.observe.__doc__)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true,
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### Signatures"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "Mentioned in the doc string, the callback registered must have the signature `handler(change)` where `change` is a dictionary holding the information about the change. \n",
    "\n",
    "Using this method, an example of how to output an `IntSlider`'s value as it is changed can be seen below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "01bd94cb03fb402ab86fbd6ace38d09b"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "int_range = widgets.IntSlider()\n",
    "display(int_range)\n",
    "\n",
    "def on_value_change(change):\n",
    "    print(change['new'])\n",
    "\n",
    "int_range.observe(on_value_change, names='value')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## Linking Widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "Often, you may want to simply link widget attributes together. Synchronization of attributes can be done in a simpler way than by using bare traitlets events. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "### Linking traitlets attributes in the kernel\n",
    "\n",
    "The first method is to use the `link` and `dlink` functions from the `traitlets` module. This only works if we are interacting with a live kernel."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "import traitlets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "58f809d3255944028e26010a7b820b7b"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "53298b8e30a34daf89bc08036ee90e73"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "052bb821482c4e43b4a4cccc38dc8265"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "caption = widgets.Label(value='The values of slider1 and slider2 are synchronized')\n",
    "sliders1, slider2 = widgets.IntSlider(description='Slider 1'),\\\n",
    "                    widgets.IntSlider(description='Slider 2')\n",
    "l = traitlets.link((sliders1, 'value'), (slider2, 'value'))\n",
    "display(caption, sliders1, slider2)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "969463073307481a8035894210978797"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "8b92997bff2641109f3367794c3c1bc4"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "9fbf05bb01524a4883dca5c6ee3b862b"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "caption = widgets.Label(value='Changes in source values are reflected in target1')\n",
    "source, target1 = widgets.IntSlider(description='Source'),\\\n",
    "                  widgets.IntSlider(description='Target 1')\n",
    "dl = traitlets.dlink((source, 'value'), (target1, 'value'))\n",
    "display(caption, source, target1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "Function `traitlets.link` and `traitlets.dlink` return a `Link` or `DLink` object. The link can be broken by calling the `unlink` method."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "l.unlink()\n",
    "dl.unlink()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "### Registering callbacks to trait changes in the kernel\n",
    "\n",
    "Since attributes of widgets on the Python side are traitlets, you can register handlers to the change events whenever the model gets updates from the front-end.\n",
    "\n",
    "The handler passed to the decorator will be called with one change argument. The change objecy at least holds a `type` key and a `name` key, corresponding respectively to the type of notification and the name of the attribute that triggered the notification.\n",
    "\n",
    "Other keys may be passed depending on the value of `type`. In the case where type is `change`, we also have the following keys:\n",
    "\n",
    "- `owner` : the HasTraits instance\n",
    "- `old` : the old value of the modified trait attribute\n",
    "- `new` : the new value of the modified trait attribute\n",
    "- `name` : the name of the modified trait attribute."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "8761630b797042fb9ed2f23495f46905"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "e17348dfdaa34206aa8e4a02a71c4c09"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "caption = widgets.Label(value='The values of range1 and range2 are synchronized')\n",
    "slider = widgets.IntSlider(min=-5, max=5, value=1, description='Slider')\n",
    "\n",
    "def handle_slider_change(change):\n",
    "    caption.value = 'The slider value is ' + (\n",
    "        'negative' if change.new < 0 else 'nonnegative'\n",
    "    )\n",
    "\n",
    "slider.observe(handle_slider_change, names='value')\n",
    "\n",
    "display(caption, slider)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "### Linking widgets attributes from the client side"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "When synchronizing traitlets attributes, you may experience a lag because of the latency due to the roundtrip to the server side. You can also directly link widget attributes in the browser using the link widgets, in either a unidirectional or a bidirectional fashion.\n",
    "\n",
    "Javascript links persist when embedding widgets in html web pages without a kernel."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "85f446392a39465692ab2223d0006eb2"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "2c7acc51bfec4098b2aefebae8b465ce"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "480c329cfef84ac6a1c22f6f586e257e"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "caption = widgets.Label(value='The values of range1 and range2 are synchronized')\n",
    "range1, range2 = widgets.IntSlider(description='Range 1'),\\\n",
    "                 widgets.IntSlider(description='Range 2')\n",
    "l = widgets.jslink((range1, 'value'), (range2, 'value'))\n",
    "display(caption, range1, range2)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "42ea4119375b4fb2a347f406fdfdb0d3"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "6f8c3948a7fb485fa139a034758e8267"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "8a7e0233e1b84a578fb71af0c05ce03a"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "caption = widgets.Label(value='Changes in source_range values are reflected in target_range1')\n",
    "source_range, target_range1 = widgets.IntSlider(description='Source range'),\\\n",
    "                              widgets.IntSlider(description='Target range 1')\n",
    "dl = widgets.jsdlink((source_range, 'value'), (target_range1, 'value'))\n",
    "display(caption, source_range, target_range1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "Function `widgets.jslink` returns a `Link` widget. The link can be broken by calling the `unlink` method."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "# l.unlink()\n",
    "# dl.unlink()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true,
    "nbsphinx": "hidden"
   },
   "source": [
    "[Index](Index.ipynb) - [Back](Widget List.ipynb) - [Next](Widget Styling.ipynb)"
   ]
  }
 ],
 "metadata": {
  "cell_tags": [
   [
    "<None>",
    null
   ]
  ],
  "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.5.2"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {
     "01bd94cb03fb402ab86fbd6ace38d09b": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "IntSliderModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "layout": "IPY_MODEL_5f6fb640a8ce4d6b8bd003dbcf8f49e4",
       "style": "IPY_MODEL_edd1269e3acd4fd4812e127c97ca4843"
      }
     },
     "0327590224fa4dae8231cd01218e08f9": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "SliderStyleModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "052bb821482c4e43b4a4cccc38dc8265": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "IntSliderModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "description": "Slider 2",
       "layout": "IPY_MODEL_cbe812664c664d30a53555d81804d63f",
       "style": "IPY_MODEL_0327590224fa4dae8231cd01218e08f9"
      }
     },
     "127ad6e439e344018ac75e1bfb4c68a0": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "1640842f5d98476eb839c9c8d7161333": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "1cf1822112d04c14b024f24d639a45a8": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "218c762112844bdea1ae532c089b7c1a": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "SliderStyleModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "2b5fd4c2da8a45b0a87457956d4b3b74": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "SliderStyleModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "2c7acc51bfec4098b2aefebae8b465ce": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "IntSliderModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "description": "Range 1",
       "layout": "IPY_MODEL_766647c3713146259e9d8ec3352b5a16",
       "style": "IPY_MODEL_85028d3b08f84e2fbcffb95ada592e68"
      }
     },
     "3f910345a58041afa092e90ae10cd6be": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "ButtonStyleModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "42ea4119375b4fb2a347f406fdfdb0d3": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LabelModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "layout": "IPY_MODEL_463787729d594ed0866bc8c8a2d608e3",
       "value": "Changes in source_range values are reflected in target_range1"
      }
     },
     "463787729d594ed0866bc8c8a2d608e3": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "480c329cfef84ac6a1c22f6f586e257e": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "IntSliderModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "description": "Range 2",
       "layout": "IPY_MODEL_a9e6b38d32b848c28e53fb292a3b2a9e",
       "style": "IPY_MODEL_ec1ebabf71d74977bd70da755c80487c"
      }
     },
     "49410a0f0b0b45cfbdd6c6bde573fcb4": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "SliderStyleModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "53298b8e30a34daf89bc08036ee90e73": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "IntSliderModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "description": "Slider 1",
       "layout": "IPY_MODEL_e8cfe5cae00845e7b3a7cad5a226ff14",
       "style": "IPY_MODEL_49410a0f0b0b45cfbdd6c6bde573fcb4"
      }
     },
     "58f809d3255944028e26010a7b820b7b": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LabelModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "layout": "IPY_MODEL_7446bd8d2ae94493b323aac6a014c5bf",
       "value": "The values of slider1 and slider2 are synchronized"
      }
     },
     "5a5fd9d88b04406f9ef75e60be1df9da": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "5f6fb640a8ce4d6b8bd003dbcf8f49e4": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "5f759bebb6bb42429b5a4ed427014908": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LinkModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "source": [
        "IPY_MODEL_2c7acc51bfec4098b2aefebae8b465ce",
        "value"
       ],
       "target": [
        "IPY_MODEL_480c329cfef84ac6a1c22f6f586e257e",
        "value"
       ]
      }
     },
     "66e34e1e80ed4c4c9789345041d64a64": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "6f8c3948a7fb485fa139a034758e8267": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "IntSliderModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "description": "Source range",
       "layout": "IPY_MODEL_1640842f5d98476eb839c9c8d7161333",
       "style": "IPY_MODEL_afb5b3c3d79142c9a2fb66762d8b488f"
      }
     },
     "7446bd8d2ae94493b323aac6a014c5bf": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "766647c3713146259e9d8ec3352b5a16": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "7b28f2c78b784b8da9b66d5e01695f4f": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "SliderStyleModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "85028d3b08f84e2fbcffb95ada592e68": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "SliderStyleModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "85f446392a39465692ab2223d0006eb2": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LabelModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "layout": "IPY_MODEL_937340ba407a4a9b93e6fc20e72dca5c",
       "value": "The values of range1 and range2 are synchronized"
      }
     },
     "8761630b797042fb9ed2f23495f46905": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LabelModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "layout": "IPY_MODEL_1cf1822112d04c14b024f24d639a45a8",
       "value": "The values of range1 and range2 are synchronized"
      }
     },
     "8a7e0233e1b84a578fb71af0c05ce03a": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "IntSliderModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "description": "Target range 1",
       "layout": "IPY_MODEL_ebd4e8155c54434bb9b3859efb2ac53c",
       "style": "IPY_MODEL_218c762112844bdea1ae532c089b7c1a"
      }
     },
     "8b92997bff2641109f3367794c3c1bc4": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "IntSliderModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "description": "Source",
       "layout": "IPY_MODEL_daf85c290fe042bfaa002bd8b1d9ae90",
       "style": "IPY_MODEL_7b28f2c78b784b8da9b66d5e01695f4f"
      }
     },
     "937340ba407a4a9b93e6fc20e72dca5c": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "969463073307481a8035894210978797": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LabelModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "layout": "IPY_MODEL_127ad6e439e344018ac75e1bfb4c68a0",
       "value": "Changes in source values are reflected in target1"
      }
     },
     "9cdef1f1216f4ae08225bcf64fc47f1b": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "ButtonModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "description": "Click Me!",
       "layout": "IPY_MODEL_c49568ba7b774871b3de094920b41dcb",
       "style": "IPY_MODEL_3f910345a58041afa092e90ae10cd6be"
      }
     },
     "9fbf05bb01524a4883dca5c6ee3b862b": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "IntSliderModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "description": "Target 1",
       "layout": "IPY_MODEL_ef20d87c8add44b990612c775b591aa2",
       "style": "IPY_MODEL_ec69195a997b4b2ea6f66eca464e9f66"
      }
     },
     "a9e6b38d32b848c28e53fb292a3b2a9e": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "afb5b3c3d79142c9a2fb66762d8b488f": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "SliderStyleModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "c49568ba7b774871b3de094920b41dcb": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "cab0a6538a00491f95c48e77707e9ad8": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "TextModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "layout": "IPY_MODEL_5a5fd9d88b04406f9ef75e60be1df9da"
      }
     },
     "cbe812664c664d30a53555d81804d63f": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "d0456254f9894b9da53ecfca1c4f25b1": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "DirectionalLinkModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "source": [
        "IPY_MODEL_6f8c3948a7fb485fa139a034758e8267",
        "value"
       ],
       "target": [
        "IPY_MODEL_8a7e0233e1b84a578fb71af0c05ce03a",
        "value"
       ]
      }
     },
     "daf85c290fe042bfaa002bd8b1d9ae90": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "e17348dfdaa34206aa8e4a02a71c4c09": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "IntSliderModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30",
       "description": "Slider",
       "layout": "IPY_MODEL_66e34e1e80ed4c4c9789345041d64a64",
       "max": 5,
       "min": -5,
       "style": "IPY_MODEL_2b5fd4c2da8a45b0a87457956d4b3b74",
       "value": 1
      }
     },
     "e8cfe5cae00845e7b3a7cad5a226ff14": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "ebd4e8155c54434bb9b3859efb2ac53c": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "ec1ebabf71d74977bd70da755c80487c": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "SliderStyleModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "ec69195a997b4b2ea6f66eca464e9f66": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "SliderStyleModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "edd1269e3acd4fd4812e127c97ca4843": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "SliderStyleModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     },
     "ef20d87c8add44b990612c775b591aa2": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.0.30",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.0.30",
       "_view_module_version": "~2.0.30"
      }
     }
    },
    "version_major": 1,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}