{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "\n",
    "pn.extension(sizing_mode=\"stretch_width\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This example demonstrates how to sync widget state with the URL bar, restoring it from the URL parameters on page load and updating it when the widgets change. Note this example will only work when served with `panel serve`. In a notebook `pn.state.location` does not exist until after the first object has been displayed:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widget = pn.widgets.FloatSlider(name='Slider', start=0, end=10)\n",
    "widget2 = pn.widgets.TextInput(name='Text')\n",
    "widget3 = pn.widgets.RangeSlider(name='RangeSlider', start=0, end=10)\n",
    "\n",
    "if pn.state.location:\n",
    "    pn.state.location.sync(widget, {'value': 'slider_value'})\n",
    "    pn.state.location.sync(widget2, {'value': 'text_value'})\n",
    "    pn.state.location.sync(widget3, {'value': 'range_value'})\n",
    "\n",
    "pn.Row(widget, widget2, widget3)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## App\n",
    "\n",
    "Lets wrap it into nice template that can be served via `panel serve sync_location.ipynb`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(\n",
    "    site=\"Panel\", \n",
    "    title=\"Sync Location\", \n",
    "    main=[\n",
    "        \"This example demonstrates **how to sync widget state with the URL bar**. The widgets values are set from the URL parameters on page load and the URL parameters are set when a widget value changes.\",\n",
    "        pn.Column(widget, widget2, widget3),\n",
    "    ], main_max_width=\"768px\",\n",
    ").servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}