<h2 dir="auto">Problem Description</h2>
<p dir="auto">If I render the slider with code like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Slider step={1} min={0} max={this.state.max} value={this.state.currentValue} /&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Slider</span> <span class="pl-c1">step</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">1</span><span class="pl-kos">}</span> <span class="pl-c1">min</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span> <span class="pl-c1">max</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">max</span><span class="pl-kos">}</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">currentValue</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">And then I call <code class="notranslate">setState</code> to increase <code class="notranslate">max</code>, the slider does not update the position of the marker.  If I increase <code class="notranslate">max</code> again, then the marker position updates to be where it should have been on the previous render (e.g. it is still wrong).</p>
<p dir="auto">For example,</p>
<ul dir="auto">
<li>first render, max={100} value={50} and the marker appears in the middle of the slider as it should.</li>
<li>second render, max={200} value={50} and the marker is <em>still</em> in the middle of the slider (it should be at the 25% position)</li>
<li>third render, max={400} value={50} and the marker is now at the 25% mark (it should be at the 12.5% position).</li>
</ul>
<p dir="auto">This issue seems related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="138986534" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/3619" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/3619/hovercard" href="https://github.com/mui/material-ui/issues/3619">#3619</a>.</p>
<h2 dir="auto">Versions</h2>
<ul dir="auto">
<li>Material-UI: v0.15.0-beta.2</li>
<li>React: 15.0.1</li>
<li>Browser: Chrome 49.0.2623.112 m (Windows 10 x64)</li>
</ul>
<p dir="auto">Changing value, min and/or max props at the same time results in an broken state. This happens because on value change percent is re-calculated based on current min/max not based on the new ones:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  componentWillReceiveProps(nextProps, nextContext) {
    ...
    if (nextProps.value !== undefined &amp;&amp; !this.state.dragging) {
      this.setValue(nextProps.value);
    }
  },

...

setValue(i) {
    // calculate percentage
    let percent = (i - this.props.min) / (this.props.max - this.props.min);
    ....
  },"><pre class="notranslate">  <span class="pl-en">componentWillReceiveProps</span><span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">,</span> <span class="pl-s1">nextContext</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    ...
    <span class="pl-en">if</span> <span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">.</span><span class="pl-c1">value</span> <span class="pl-c1">!==</span> <span class="pl-c1">undefined</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">dragging</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setValue</span><span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

...

<span class="pl-en">setValue</span><span class="pl-kos">(</span><span class="pl-s1">i</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    <span class="pl-c">// calculate percentage</span>
    <span class="pl-k">let</span> <span class="pl-s1">percent</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">i</span> <span class="pl-c1">-</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">min</span><span class="pl-kos">)</span> <span class="pl-c1">/</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">max</span> <span class="pl-c1">-</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">min</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    ...<span class="pl-kos">.</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div>