#!/usr/bin/env python
# coding: utf-8

# In[ ]:


flex_title = "Illusionist linked widgets"
flex_orientation = "rows"
flex_subtitle = "built using jupyter-flex"
flex_include_source = True
flex_source_link = "https://github.com/danielfrg/jupyter-flex/blob/master/examples/illusionist/linked.ipynb"


# ## Row 1

# ### jslink

# This works in regular Jupyter widgets, its all client side.

# In[ ]:


import ipywidgets as widgets


# In[ ]:


range1 = widgets.IntSlider(description='Range 1')
range2 = widgets.IntSlider(description='Range 2')

l = widgets.jslink((range1, 'value'), (range2, 'value'))
display(range1, range2)


# ### jsdlink

# This works in regular Jupyter widgets, its all client side.

# In[ ]:


source_range = widgets.IntSlider(description='Source range')
target_range1 = widgets.IntSlider(description='Target range 1')

dl = widgets.jsdlink((source_range, 'value'), (target_range1, 'value'))
display(source_range, target_range1)


# ## Row 2

# ### link

# This requires a kernel. With illusionist we make it all client side.
# The values of `slider1` and `slider2` are synchronized.
# 
# 

# In[ ]:


sliders1 = widgets.IntSlider(description='Slider 1')
slider2 = widgets.IntSlider(description='Slider 2')

l = widgets.link((sliders1, 'value'), (slider2, 'value'))
display(sliders1, slider2)


# ### dlink

# This requires a kernel. With illusionist we make it all client side.
# 
# The value of `source` will be pushed to `target`.

# In[ ]:


source = widgets.IntSlider(description='Source')
target = widgets.IntSlider(description='Target')

dl = widgets.dlink((source, 'value'), (target, 'value'))
display(source, target)


# In[ ]: