How to link RangeSlider's range to a plot range?

Community Support
1

I’m trying to use js_link() to dynamically set the range of a RangeSlider based on a plot range.
When I click a button, the source of the plot changes in away that its x range changes as well but the range of the RangeSlider for some reason doesn’t.

Here’s an example:

from bokeh.io import curdoc
from bokeh.models.widgets.sliders import RangeSlider
from bokeh.plotting import figure
from bokeh.models.tools import RangeTool
from bokeh.models.ranges import Range1d
from bokeh.models.sources import ColumnDataSource
from bokeh.models.widgets.buttons import Button
from bokeh.models.layouts import Column, Row
import numpy as np


# button
button = Button(
    label="Click", 
    button_type='primary',
    name="button"
)

# range slider
range_slider = RangeSlider( 
    start=0,
    end=1,
    value=(0,1),
    step=1, 
    title="Range Slider", 
)


# plot
plot = figure(name='plot')

# line
x = np.linspace(0, 30)
y = x**2
source = ColumnDataSource(data={'x': x, 'y': y})
plot.line(x='x', y='y', source=source)

# layout
layout = Row(
    Column(button, range_slider),
    plot
)

# button callback
def on_button_click():
    x = np.linspace(0, 300)
    y = x**2

    source.update(data={'x': x, 'y': y})

# link range slider bounds
range_slider.js_link('start', plot.x_range, 'start')
range_slider.js_link('end', plot.x_range, 'end')

# on button click
button.on_click(on_button_click)

curdoc().add_root(layout)
2

Try the reverse. Right now, your code should make the range change according to the changes of start/end values of range_slider. js_link is unidirectional.