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

# # Double slider widget for x axis range

# ##### Make horizontal slider widths 100%

# In[48]:


from IPython.core.display import HTML

styles = '''<style>.widget-hslider { width: 100%; }
    .widget-hbox { width: 100% !important; }
    .widget-slider { width: 100% !important; }</style>'''

HTML(styles)


# ##### Widgets don't display in nbviewer; Here's a GIF to show how this works

# In[51]:


from IPython.display import Image
Image(url='http://i.imgur.com/ptVBU5m.gif')


# In[42]:


import plotly.plotly as py
from plotly.widgets import GraphWidget
from IPython.html import widgets 
from IPython.display import display, clear_output


# In[43]:


g = GraphWidget('https://plot.ly/~chriddyp/674')
xmin, xmax = py.get_figure("https://plot.ly/~chriddyp/674/")['layout']['xaxis']['range']
print 'x-axis range is in Unix time (milliseconds)', xmin, xmax


# In[44]:


class x_left:
    def on_x_change(self, name, old_value, new_value):
        g.relayout({ 'xaxis.range[0]': new_value })
        
class x_right:
    def on_x_change(self, name, old_value, new_value):
        g.relayout({ 'xaxis.range[1]': new_value })
        

left_slider = widgets.FloatSliderWidget(min=xmin,max=xmax,value=xmin,step=(xmax-xmin)/1000.0)
left_slider.description = 'Left Axis'
left_slider.on_trait_change(x_left().on_x_change, 'value')

right_slider = widgets.FloatSliderWidget(min=xmin,max=xmax,value=xmax,step=(xmax-xmin)/1000.0)
right_slider.description = 'Right Axis'
right_slider.on_trait_change(x_right().on_x_change, 'value')


# In[46]:


display(g)
display(left_slider)
display(right_slider)


# ### Call help() on a graph widget to reference its methods

# In[14]:


help(g)


# In[15]:


# CSS styling within IPython notebook - feel free to re-use
from IPython.core.display import HTML
import urllib2

HTML(urllib2.urlopen('http://bit.ly/1Bf5Hft').read())