RangeSlider not displaying correctly
sida-wang opened this issue · comments
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!
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.