Add limits to Swipe

examples/reference/layouts/Swipe.ipynb

@@ -22,13 +22,15 @@
     "\n",
     "#### Parameters:\n",
     "\n",
-    "* **``objects``** (list): The before and after components to lay out.\n",
-    "* **``value``** (int): The percentage of the *after* panel shown. Default is 50.\n",
+    "* **`end`** (int): Limits the maximum percentage the swipe handler can be moved to.\n",
+    "* **`objects`** (list): The before and after components to lay out.\n",
+    "* **`start`** (int): Limits the minimum percentage the swipe handler can be moved to.\n",
+    "* **`value`** (int): The percentage of the *after* panel shown. Default is 50.\n",
     "\n",
     "Styling-related parameters:\n",
     "\n",
-    "* **``slider_width``** (int): The width of the slider in pixels. Default is 12.\n",
-    "* **``slider_color``** (str): The color of the slider. Default is 'black'.\n",
+    "* **`slider_width`** (int): The width of the slider in pixels. Default is 12.\n",
+    "* **`slider_color`** (str): The color of the slider. Default is 'black'.\n",
     "\n",
     "For further layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
     "\n",
@@ -83,6 +85,24 @@
     "    value=51\n",
     ")"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "8fba9d29-fc6f-4b13-889f-189f10a5ac4c",
+   "metadata": {},
+   "source": [
+    "We may also limit the minimum and maximum percentage the swipe handle can be dragged to using the `start` and `stop` values:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "1ecc584a-fae8-45d8-90f5-22a1d980a065",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.Swipe(f\"<code>|{'-'*100}|</code>\", f\"<code>|{'='*100}|</code>\", start=20, end=80)"
+   ]
   }
  ],
  "metadata": {

panel/layout/swipe.py

@@ -30,6 +30,12 @@ class Swipe(ListLike, ReactiveHTML):
     slider_color = param.Color(default="black", doc="""
         The color of the slider""")
 
+    start = param.Integer(default=0, bounds=(0, 100), doc="""
+        Limits the minimum percentage the swipe handler can be moved to.""")
+
+    end = param.Integer(default=100, bounds=(0, 100), doc="""
+        Limits the maximum percentage the swipe handler can be moved to.""")
+
     value = param.Integer(default=50, bounds=(0, 100), doc="""
         The percentage of the *after* panel to show.""")
 
@@ -71,6 +77,12 @@ class Swipe(ListLike, ReactiveHTML):
              current = e.clientX
              start = view.el.getBoundingClientRect().left
              value = parseInt(((current-start)/ container.clientWidth)*100)
+             if (data.start != null) {
+               value = Math.max(data.start, value)
+             }
+             if (data.end != null) {
+               value = Math.min(data.end, value)
+             }
              data.value = Math.max(0, Math.min(value, 100))
            }
            let e = event || window.event;
@@ -111,6 +123,10 @@ def _update_layout(self):
         self._before = self.before
         self._after = self.after
 
+    @param.depends('start', 'end', watch=True, on_init=True)
+    def _sync_bounds(self):
+        self.param.value.bounds = (self.start, self.end)
+
     @property
     def before(self):
         return self[0] if len(self) else None