RangeSlider not displaying correctly

[sida-wang]

I've been trying to incorporate the range sliders from ipywidgets into my bokeh plot since the default bokeh widgets don't allow for user to type precise values. The example file uses a FloatSlider which has no issues with bokeh plots. For some reason the IntRangeSlider and the FloatRangeSlider don't work the same way.

Reproducible example below

from bokeh.io import output_notebook, show

from ipywidgets_bokeh import IPyWidget

import ipywidgets as ipw

output_notebook()

test_slider = ipw.IntRangeSlider(value=[5,7], min=0, max=10)
wrapper = IPyWidget(widget=test_slider)

#display(test_slider)
# shows a range slider populated between 5 and 7

show(wrapper)
#shows a slider with the knob fixed at the left displaying a value of NaN

An image of the returned slider.

In the browser console, it is outputting the following error when I try and interact with the widget. Strangely enough it allows me to click on the NaN value and type values. Once I type something, it begins to behave like a normal slider (no range).

VM279:302 Uncaught TypeError: Cannot read property 'toggleClass' of undefined
    at e.<computed>.<computed>._toggleClass (eval at <anonymous> (output_binary.js?vrz=colab-20210413-060132-RC00_368166360:1), <anonymous>:302:5975)
    at e.<computed>.<computed>._addClass (eval at <anonymous> (output_binary.js?vrz=colab-20210413-060132-RC00_368166360:1), <anonymous>:302:5784)
    at e.<computed>.<computed>._mouseCapture (eval at <anonymous> (output_binary.js?vrz=colab-20210413-060132-RC00_368166360:1), <anonymous>:315:2729)
    at e.<computed>.<computed>.eval [as _mouseCapture] (eval at <anonymous> (output_binary.js?vrz=colab-20210413-060132-RC00_368166360:1), <anonymous>:302:1025)
    at e.<computed>.<computed>._mouseDown (eval at <anonymous> (output_binary.js?vrz=colab-20210413-060132-RC00_368166360:1), <anonymous>:323:1076)
    at e.<computed>.<computed>.eval [as _mouseDown] (eval at <anonymous> (output_binary.js?vrz=colab-20210413-060132-RC00_368166360:1), <anonymous>:302:1025)
    at HTMLDivElement.eval (eval at <anonymous> (output_binary.js?vrz=colab-20210413-060132-RC00_368166360:1), <anonymous>:323:362)
    at HTMLDivElement.dispatch (eval at <anonymous> (output_binary.js?vrz=colab-20210413-060132-RC00_368166360:1), <anonymous>:287:39280)
    at HTMLDivElement.g.handle (eval at <anonymous> (output_binary.js?vrz=colab-20210413-060132-RC00_368166360:1), <anonymous>:287:37275)

I'm not very familiar with JavaScript so I'm not sure how to go about addressing this. Any help is appreciated. Thanks!

[philippjfr]

This now renders correctly but exhibits different issues:

  File "/Users/philippjfr/minicondam1/envs/bk3.0/lib/python3.9/site-packages/traitlets/traitlets.py", line 841, in error
    raise TraitError(e)
traitlets.traitlets.TraitError: The 'value' trait of an IntRangeSlider instance expected a tuple, not the int 8.