---

permalink: python/range-slider

description: Create graphs with range sliders and range selectors in Python with Plotly.

title: Python Range Slider and Selectors | plotly

has_thumbnail: true

thumbnail: /images/range.png

layout: user-guide

name: Range Slider and Selector

language: python

display_as: chart_type

has_thumbnail: true

page_type: example_index

order: 4

---

{% raw %}

<div class="cell border-box-sizing text_cell rendered">

<div class="prompt input_prompt">

<div class="inner_cell">

<div class="text_cell_render border-box-sizing rendered_html">

<h1 id="Range-Sliders-and-Selectors-in-Python">Range Sliders and Selectors in Python<a class="anchor-link" href="#Range-Sliders-and-Selectors-in-Python">&#182;</a></h1>

<div class="cell border-box-sizing text_cell rendered">

<div class="prompt input_prompt">

<div class="inner_cell">

<div class="text_cell_render border-box-sizing rendered_html">

<p>Now you can implement range sliders and range selectors in your Plotly graphs with python!!!<br></p>

<div class="cell border-box-sizing text_cell rendered">

<div class="prompt input_prompt">

<div class="inner_cell">

<div class="text_cell_render border-box-sizing rendered_html">

<p>New to our python API?<br>

Learn about API authentication here: <a href="https://plot.ly/python/getting-started">https://plot.ly/python/getting-started</a> <br>

Find your api_key here: <a href="https://plot.ly/settings/api">https://plot.ly/settings/api</a></p>

<div class="cell border-box-sizing code_cell rendered">

<div class="input">

<div class="prompt input_prompt">In&nbsp;[2]:</div>

<div class="inner_cell">

<div class="input_area">

<div class=" highlight hl-ipython2"><pre><span class="kn">import</span> <span class="nn">plotly</span>

<span class="kn">import</span> <span class="nn">plotly.plotly</span> <span class="kn">as</span> <span class="nn">py</span>

<span class="kn">import</span> <span class="nn">plotly.graph_objs</span> <span class="kn">as</span> <span class="nn">go</span>

<span class="n">plotly</span><span class="o">.</span><span class="n">__version__</span>

<div class="output_wrapper">

<div class="output">

<div class="output_area"><div class="prompt output_prompt">Out[2]:</div>

<div class="output_text output_subarea output_execute_result">

<pre>&apos;1.9.7&apos;</pre>

<div class="cell border-box-sizing text_cell rendered">

<div class="prompt input_prompt">

<div class="inner_cell">

<div class="text_cell_render border-box-sizing rendered_html">

<p>Note: range sliders and range selectors are available in version <b>1.9.7+</b><br>

Run <code>pip install plotly --upgrade</code> to update your Plotly version</p>

<div class="cell border-box-sizing text_cell rendered">

<div class="prompt input_prompt">

<div class="inner_cell">

<div class="text_cell_render border-box-sizing rendered_html">

<h5 id="Import-Data">Import Data<a class="anchor-link" href="#Import-Data">&#182;</a></h5>

<div class="cell border-box-sizing code_cell rendered">

<div class="input">

<div class="prompt input_prompt">In&nbsp;[4]:</div>

<div class="inner_cell">

<div class="input_area">

<div class=" highlight hl-ipython2"><pre><span class="kn">from</span> <span class="nn">datetime</span> <span class="kn">import</span> <span class="n">datetime</span>

<span class="kn">import</span> <span class="nn">pandas.io.data</span> <span class="kn">as</span> <span class="nn">web</span>

<span class="n">df</span> <span class="o">=</span> <span class="n">web</span><span class="o">.</span><span class="n">DataReader</span><span class="p">(</span><span class="s">&quot;aapl&quot;</span><span class="p">,</span> <span class="s">&#39;yahoo&#39;</span><span class="p">,</span>

<span class="n">datetime</span><span class="p">(</span><span class="mi">2007</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">1</span><span class="p">),</span>

<span class="n">datetime</span><span class="p">(</span><span class="mi">2009</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">1</span><span class="p">))</span>

<div class="cell border-box-sizing text_cell rendered">

<div class="prompt input_prompt">

<div class="inner_cell">

<div class="text_cell_render border-box-sizing rendered_html">

<h5 id="Create-a-Graph-with-Range-Selectors-and-a-Range-Slider">Create a Graph with Range Selectors and a Range Slider<a class="anchor-link" href="#Create-a-Graph-with-Range-Selectors-and-a-Range-Slider">&#182;</a></h5>

<div class="cell border-box-sizing code_cell rendered">

<div class="input">

<div class="prompt input_prompt">In&nbsp;[5]:</div>

<div class="inner_cell">

<div class="input_area">

<div class=" highlight hl-ipython2"><pre><span class="n">trace</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Scatter</span><span class="p">(</span><span class="n">x</span><span class="o">=</span><span class="n">df</span><span class="o">.</span><span class="n">index</span><span class="p">,</span>

<span class="n">y</span><span class="o">=</span><span class="n">df</span><span class="o">.</span><span class="n">High</span><span class="p">)</span>

<span class="n">data</span> <span class="o">=</span> <span class="p">[</span><span class="n">trace</span><span class="p">]</span>

<span class="n">layout</span> <span class="o">=</span> <span class="nb">dict</span><span class="p">(</span>

<span class="n">title</span><span class="o">=</span><span class="s">&#39;Time series with range slider and selectors&#39;</span><span class="p">,</span>

<span class="n">xaxis</span><span class="o">=</span><span class="nb">dict</span><span class="p">(</span>

<span class="n">rangeselector</span><span class="o">=</span><span class="nb">dict</span><span class="p">(</span>

<span class="n">buttons</span><span class="o">=</span><span class="nb">list</span><span class="p">([</span>

<span class="nb">dict</span><span class="p">(</span><span class="n">count</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span>

<span class="n">label</span><span class="o">=</span><span class="s">&#39;1m&#39;</span><span class="p">,</span>

<span class="n">step</span><span class="o">=</span><span class="s">&#39;month&#39;</span><span class="p">,</span>

<span class="n">stepmode</span><span class="o">=</span><span class="s">&#39;backward&#39;</span><span class="p">),</span>

<span class="nb">dict</span><span class="p">(</span><span class="n">count</span><span class="o">=</span><span class="mi">6</span><span class="p">,</span>

<span class="n">label</span><span class="o">=</span><span class="s">&#39;6m&#39;</span><span class="p">,</span>

<span class="n">step</span><span class="o">=</span><span class="s">&#39;month&#39;</span><span class="p">,</span>

<span class="n">stepmode</span><span class="o">=</span><span class="s">&#39;backward&#39;</span><span class="p">),</span>

<span class="nb">dict</span><span class="p">(</span><span class="n">count</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span>

<span class="n">label</span><span class="o">=</span><span class="s">&#39;YTD&#39;</span><span class="p">,</span>

<span class="n">step</span><span class="o">=</span><span class="s">&#39;year&#39;</span><span class="p">,</span>

<span class="n">stepmode</span><span class="o">=</span><span class="s">&#39;todate&#39;</span><span class="p">),</span>

<span class="nb">dict</span><span class="p">(</span><span class="n">count</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span>

<span class="n">label</span><span class="o">=</span><span class="s">&#39;1y&#39;</span><span class="p">,</span>

<span class="n">step</span><span class="o">=</span><span class="s">&#39;year&#39;</span><span class="p">,</span>

<span class="n">stepmode</span><span class="o">=</span><span class="s">&#39;backward&#39;</span><span class="p">),</span>

<span class="nb">dict</span><span class="p">(</span><span class="n">step</span><span class="o">=</span><span class="s">&#39;all&#39;</span><span class="p">)</span>

<span class="p">])</span>

<span class="p">),</span>

<span class="n">rangeslider</span><span class="o">=</span><span class="nb">dict</span><span class="p">(),</span>

<span class="nb">type</span><span class="o">=</span><span class="s">&#39;date&#39;</span>

<span class="p">)</span>

<span class="p">)</span>

<span class="n">fig</span> <span class="o">=</span> <span class="nb">dict</span><span class="p">(</span><span class="n">data</span><span class="o">=</span><span class="n">data</span><span class="p">,</span> <span class="n">layout</span><span class="o">=</span><span class="n">layout</span><span class="p">)</span>

<span class="n">py</span><span class="o">.</span><span class="n">iplot</span><span class="p">(</span><span class="n">fig</span><span class="p">)</span>

<div class="output_wrapper">

<div class="output">

<div class="output_area"><div class="prompt output_prompt">Out[5]:</div>

<div class="output_html rendered_html output_subarea output_execute_result">

<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~chelsea_lyn/11483.embed" height="525px" width="100%"></iframe>

</div>{% endraw %}