diff --git a/examples/reference/layouts/Swipe.ipynb b/examples/reference/layouts/Swipe.ipynb
index 99e9d36af5..3ee3d50232 100644
--- a/examples/reference/layouts/Swipe.ipynb
+++ b/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\"|{'-'*100}|\", f\"|{'='*100}|\", start=20, end=80)"
+ ]
}
],
"metadata": {
diff --git a/panel/layout/swipe.py b/panel/layout/swipe.py
index 18d94762a6..b276222c7a 100644
--- a/panel/layout/swipe.py
+++ b/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