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