How to use the IntRangeSlider with ReactiveExpr?

Panel
1

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?

2

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

image
image1026×120 2.83 KB

slider.param.value.rx()

image
image1034×116 4.77 KB

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

image
image1048×116 4.29 KB

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
3

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

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