title: Creat Range Slider in React.js
body: <p>I'm trying to create a range slider in react.js</p>
  <p>rangeSlider.jsx</p>
  <pre><code>const RangeSlider = ({onChange}) =&gt; {
  
      const [slider, setSlider] = useState({
          max: 100, 
          min: 0, 
          value: 0, 
          label: ''
      });
  
      const onSlide = () =&gt; {
          onChange(slider.value);
      } 
  
      return (
          &lt;div className=&quot;range-slider&quot;&gt;
              &lt;p&gt;{slider.label}&lt;/p&gt;
              &lt;input type=&quot;range&quot; min={slider.min} max={slider.max} value={slider.value} 
               onChange={() =&gt; onSlide()} className=&quot;slider&quot; id=&quot;myRange&quot;&gt;&lt;/input&gt;
          &lt;/div&gt;
      );
  }
  export default RangeSlider;
  </code></pre>
  <p>then I use it in other components</p>
  <pre><code> &lt;RangeSlider onChange={(value) =&gt; sliderValueChanged(value)} /&gt;
  </code></pre>
  <ul>
  <li>If I wanted to pass in a custom label, how would I update the state
  to do that?</li>
  <li>Do I have to use React.memo for this? My understanding, every time the slider value changes it creates a new instance of the slider.</li>
  <li>I'd like this to be robust (steps, multi-handles, tool-tips, etc.) eventually, any help
  is appreciated.</li>
  </ul>