How To Add Interactive Widget ( Slide Bar ) In Jupyter Notebook

In the previous article, we have told you how to add rich media output components ( audio, video, image, etc) in jupyter notebook. But all those widgets are not interactive. This article will show you an example of how to add a slide bar in jupyter notebook. When you slide the bar, it will change the python function input parameter value to the slide bar value accordingly, and then the python function result will be displayed on the jupyter notebook web page.

1. Install ipywidgets In Python Library.

1. Check whether ipywidgets has been installed in your python environment. If you see the below output, that means ipywidgets has been installed.

   (python_example) C:\Users\zhaosong>pip show ipywidgets
   Name: ipywidgets
   Version: 7.5.1
   Summary: IPython HTML widgets for Jupyter
   Home-page: http://ipython.org
   Author: IPython Development Team
   Author-email: ipython-dev@scipy.org
   License: BSD
   Location: c:\users\zhaosong\anaconda3\envs\python_example\lib\site-packages
   Requires: ipython, nbformat, widgetsnbextension, ipykernel, traitlets
   Required-by:

2. If ipywidgets has not been installed, run the below code to install it.

   > pip install ipywidgets

2. Use Interact Decorator To Add Slide Bar To Python Function.

1. To add a slide bar to a special python function in jupyter notebook, you just need to import ipywidget.interact decorator, then use it to decorate the python function, then the slide bar current value will be passed to the python function by the x argument.
2. You can add one slide bar to one python function defined in the jupyter notebook by decorating each function with @interactdecorator. If your ipython version is before 4.0, then you should use IPython.html.widgets.interact to define the interactive slide bar.

3. Add Slide Bar To Python Function By @interact Decorator Example.

1. This example defines two python function, and add @interact decorator to each of the function. Input below python source code in jupyter notebook line cell.

   # import ipywidgets.interact class, this class will represent a slide bar.
   from ipywidgets import interact
   
   # use interact decorator to decorate the function, so the function can receive the slide bar's value with parameter x.
   @interact(x=(0, 100))
   def double_number(x):
       print("The double of %d is %d." % (x, x*2))
       
   # add another slide bar to this function with the interact decorator.    
   @interact(y=(0, 10))
   def square_number(y):
       print("The square of %d is %d." % (y, y**2))

2. When you run the above source code, there will display two slide bars under the above code, and you can slide each bar to see the python function output on the web page.
   

4. Question & Answer.

4.1 The Interactive Slider Disappear.

1. I create a jupyter notebook, and there is a table and a slider in the notebook. When I slide the slider, it will display different date range data in the table. But recently when I run the notebook again, I can not find the slider anymore, it does not show any error message, I do not change anything to my source code and environment, can anybody tell me why and how to fix it? Thanks.
2. First, make sure you have installed the ipywidgets with the command pip show ipywidgets in a terminal.
3. If the ipywidgets python library is not installed on your virtual python environment ( maybe it has been uninstalled that you do not find ), you need to run the command pip install ipywidgets to install it.
4. If you have installed it, you can run the command jupyter nbextension enable –py –sys-prefix widgetsnbextension to enable it.