How to use the IntRangeSlider with ReactiveExpr?

I would like to use IntRangeSlider to pick a integer range (start, end). How do I make it interactive?

I tried this:

import hvplot.pandas
import pandas as pd
import numpy as np
import panel as pn

pn.extension(sizing_mode="stretch_width", template="fast")

data1 = pn.rx(pd.DataFrame(dict(a=np.random.randn(100), b=np.random.randn(100))))
data2 = pn.rx(pd.DataFrame(dict(a=np.random.randn(100), b=np.random.randn(100))))

slider = pn.widgets.IntRangeSlider(
    name="rande for b",
    start=0,
    end=100,
    value=(0, 100),
    step=10,
).servable(area="sidebar")

data1 = data1[data1["b"].between(slider.value[0], slider.value[1])]["a"]
data2 = data2[data2["b"].between(slider.value[0], slider.value[1])]["a"]


combined_scatter = data1.hvplot.scatter() * data2.hvplot.scatter()
combined_plot = pn.ReactiveExpr(combined_scatter)

combined_plot.servable(title="My Title")

But it is not interactive. The slider.value seems to be constant, just like the docs day. Namely, the docs say:

text = pn.widgets.TextInput()

text.value # πŸ‘ˆ the "value" Parameter of this widget reflects the current value
text.param.value # πŸ‘ˆ can be used as a reference to the live value

But if I try to use the slider.param.value, it won’t also work as the Range object the slider.param.value is not subscriptable.

TypeError: 'Range' object is not subscriptable

This must be a simple thing. How do you use the IntRangeSlider widget with ReactiveExpr?

I’m not sure precisely what the question is, but does this answer it?

import hvplot.pandas
import pandas as pd
import numpy as np
import panel as pn

pn.extension(sizing_mode="stretch_width", template="fast")

data1 = pn.rx(pd.DataFrame(dict(a=np.random.randn(100), b=np.random.randn(100))))
data2 = pn.rx(pd.DataFrame(dict(a=np.random.randn(100), b=np.random.randn(100))))

slider = pn.widgets.IntRangeSlider(
    name="rande for b",
    start=0,
    end=100,
    value=(0, 100),
    step=10,
).servable(area="sidebar")

data1 = data1[data1["b"].between(slider.value[0], slider.value[1])]["a"]
data2 = data2[data2["b"].between(slider.value[0], slider.value[1])]["a"]

combined_scatter = data1.hvplot.scatter() * data2.hvplot.scatter()
combined_plot = pn.ReactiveExpr(combined_scatter)

combined_plot.servable(title="My Title")
text = pn.widgets.TextInput()
text.value # πŸ‘ˆ the "value" Parameter of this widget reflects the current value
text.param.value.rx() # πŸ‘ˆ can be used as a reference to the live value

slider.param.value.rx()

slider.param.value.rx()[0]

I.e., a parameter object isn’t itself a reactive expression, but it can easily be turned into one with .rx(), and then can be used as one.

1 Like

Precisely, so to use it in your data selection you would do

data1[data1["b"].between(*slider.param.value.rx())]
2 Likes