Changing axis range with RangeSlider

Question

I have created a plot with bokeh and now trying to add some widgets to it. Currently I want to change the x axis with the RangeSlider but I think I have some trouble with the callback. Enclosed you find the code:

import pandas as pd
import numpy as np
import bokeh.plotting as bp
from bokeh.models import CustomJS
from bokeh.models.widgets import RangeSlider
from bokeh.layouts import row, widgetbox
from bokeh.plotting import figure, show, output_file


df = pd.DataFrame(np.random.randint(0,30,size=(100, 3)), columns=list('ABC'))
df.index.name ='Numbers'
dt = bp.ColumnDataSource(df)

output_file("Plot.html")

p = figure(title="Example", 
       x_axis_label = "Number", y_axis_label = "Temperature in C",
       x_range=(0,100))

p.line(source=dt, x='Numbers', y='A', color='blue', legend='Line A')
p.line(source=dt, x='Numbers', y='B', color='red', legend='Line B')
p.line(source=dt, x='Numbers', y='C', color='green', legend='Line C')
p.legend.click_policy="hide"

callback = CustomJS(args=dict(p=p), code="""
                      var a = cb_obj.value;
                      p.x_range = a;
                      p.change.emit();
                      """)

range_slider = RangeSlider(start=0, end=100,value=(2,75), step=1, title="Test")
range_slider.js_on_change('value', callback)


layout = row(p,widgetbox(range_slider))
show(layout)

Thanks in advance!

Answer 1

You have to set start and end on the range individually:

callback = CustomJS(args=dict(p=p), code="""
    var a = cb_obj.value;
    p.x_range.start = a[0];
    p.x_range.end = a[1];
""")

Also, the call to emit is unnecessary.