import panel as pn
pn.extension(sizing_mode="stretch_width")
The BeforeAfterSlider
The BeforeAfterSlider layout enables you to quickly compare two panels layed out on top of each other with a part of the before panel shown on one side of a slider and a part of the after panel shown on the other side.
value
(int): The percentage of the after panel shown. Default is 50.before
: The before panel.after
: The after panel.slider_width
(int): The width of the slider in pixels. Default is 12.slider_color
(str): The color of the slider. Default is 'silver'.import pandas as pd
import hvplot.pandas
data = pd.DataFrame({"y": range(10)})
before = data.hvplot().opts(color="green", line_width=6)
after = data.hvplot().opts(color="red", line_width=6)
before_after = pn.layout.BeforeAfterSlider(value=20, before=before, after=after, height=400)
before_after
controls = pn.WidgetBox(pn.Param(before_after, parameters=["value", "slider_width", "slider_color"]), sizing_mode="fixed")
Let wrap it up in a nice template
ACCENT_COLOR = "#0072B5"
pn.template.FastListTemplate(
site="Panel", title="BeforeAfterSlider",
sidebar=[controls[0]], main=[before_after],
accent_base_color=ACCENT_COLOR, header_background=ACCENT_COLOR
).servable();