search

bokeh / ipywidgets_bokeh

Allows embedding of Jupyter widgets in Bokeh applications.
BSD 3-Clause "New" or "Revised" License
23 stars 11 forks source link

RangeSlider not displaying correctly #22

Open sida-wang opened 3 years ago

sida-wang commented 3 years ago

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. image

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 commented 1 year ago

This now renders correctly but exhibits different issues:

![Uploading Screen Shot 2023-05-03 at 02.08.08.png…]()

  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.