Keep altair sliders with plots when concatenating

Question

When concatenating 2 charts with their own sliders, the sliders are grouped together at the end. Is there a way to have the sliders remain with each plot?

Here is an example, modified from the docs

import altair.vegalite.v3 as alt
import pandas as pd
import numpy as np

rand = np.random.RandomState(42)

df = pd.DataFrame({"xval": range(100), "yval": rand.randn(100).cumsum()})

slider1 = alt.binding_range(min=0, max=100, step=1, name="cutoff1:")
selector1 = alt.selection_single(
    name="SelectorName1", fields=["cutoff1"], bind=slider1, init={"cutoff1": 50}
)

slider2 = alt.binding_range(min=0, max=100, step=1, name="cutoff2:")
selector2 = alt.selection_single(
    name="SelectorName2", fields=["cutoff2"], bind=slider2, init={"cutoff2": 50}
)

ch_base = (
    alt.Chart(df)
    .mark_point()
    .encode(
        x="xval",
        y="yval",
        color=alt.condition(
            alt.datum.xval < selector1.cutoff1, alt.value("red"), alt.value("blue")
        ),
    )
)

ch1 = ch_base.add_selection(selector1)

ch2 = ch_base.encode(
    color=alt.condition(
        alt.datum.xval < selector2.cutoff2, alt.value("red"), alt.value("blue")
    )
).add_selection(selector2)


ch1 & ch2

As seen in the image, the sliders are by default grouped next to each other:

Answer 1

Sliders always appear at the bottom of the full chart. There is currently no way to change this.

If you would like this feature to exist in the future, I would suggest submitting a feature request in Vega-Lite.

As a workaround, you can create two charts, and embed them in a single document using vega-embed, although when you do this it is not trivial to pass signals between the two charts.