title: Sliders work in d3.js v3 but not in v4
body: <p>I have some sliders that work okay in "<a href="https://d3js.org/d3.v3.min.js" rel="nofollow noreferrer">https://d3js.org/d3.v3.min.js</a>" but not in "<a href="https://d3js.org/d3.v4.min.js" rel="nofollow noreferrer">https://d3js.org/d3.v4.min.js</a>">.  Can anyone suggest how to make this work in version 4?  Snapshot in version 3:</p>
  
  <p><a href="https://i.stack.imgur.com/ZWgXy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZWgXy.jpg" alt="enter image description here"></a></p>
  
  <p>Following are my codes:</p>
  
  <pre><code>&lt;script src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;link href="~/d3/d3-slider.css" rel="stylesheet" type="text/css" media="all" /&gt;
  &lt;script src="~/d3/d3.slider.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  .handle{
      position: absolute;
      width: 1.2em;
      height: 1.5em;
      background-image: url(../images/handle.png);
      background-repeat: no-repeat;
      z-index: 3;
  }   
  
  .greenLeft{
      background: #90D47C; /* Old browsers*/
      background: -moz-linear-gradient(top, #90D47C 0%, #BDF998 36%, #398235 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #90D47C 0%, #BDF998 36%, #398235 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, #90D47C 0%, #BDF998 36%, #398235 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#90D47C', endColorstr='#398235',GradientType=0 ); /* IE6-9 
      */
  }
  
  .coralLeft{
      background: #ff5c5c; /* Old browsers */
      background: -moz-linear-gradient(top, #ff5c5c 10%, #febbbb 36%, #ff5c5c 100%); /* FF3.6-15  */
      background: -webkit-linear-gradient(top, #ff5c5c 10%, #febbbb 36%,#ff5c5c 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, #ff5c5c 10%, #febbbb 36%,#ff5c5c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febbbb', endColorstr='#ff5c5c',GradientType=0 ); /* IE6-9 */
  }
  
  .orangeLeft{
      background: #ff7400; /* Old browsers */
      background: -moz-linear-gradient(top, #ff7400 0%, #fac695 36%, #ff670f 100%); /* FF3.6-15  */
      background: -webkit-linear-gradient(top, #ff7400 0%, #fac695 36%,#ff670f 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, #ff7400 0%, #fac695 36%,#ff670f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7400', endColorstr='#ff670f',GradientType=0 ); /* IE6-9 */
  }
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="slider1Div" style="margin: 0 auto;height:auto;"&gt;
  &lt;p style="margin-bottom:5px;text-align:center;"&gt;
      Percent of Cropland With One or More Structural Practices&lt;br /&gt;
      &lt;h12&gt;&lt;strong&gt;&lt;span id="slider1text"&gt;0&lt;/span&gt;&lt;/strong&gt;&lt;/h12&gt;
  &lt;/p&gt;
  &lt;div id="swift1Slider" class="greenLeft" style="width:40%;margin: 0 auto;"&gt;       &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br /&gt;&lt;br /&gt;
  &lt;div id="slider2Div" style="margin: 0 auto;height:auto;"&gt;
      &lt;p style="margin-bottom:5px; text-align:center;"&gt;
      Percent of Cropland With Some Level of Reduced Tillage &lt;br /&gt;
      &lt;h12&gt;&lt;strong&gt;&lt;span id="slider2text"&gt;0&lt;/span&gt;&lt;/strong&gt;&lt;/h12&gt;
      &lt;/p&gt;
  &lt;div id="swift2Slider" class="coralLeft" style="width:40%;margin: 0 auto;"&gt;    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br /&gt;&lt;br /&gt;
  &lt;div id="slider3Div" style="margin: 0 auto;height:auto;"&gt;
      &lt;p style="margin-bottom:5px; text-align:center;"&gt;
          Percent Urbanization&lt;br /&gt;
          &lt;h12&gt;&lt;strong&gt;&lt;span id="slider3text"&gt;0&lt;/span&gt;&lt;/strong&gt;&lt;/h12&gt;
      &lt;/p&gt;
  &lt;div id="swift3Slider" class="orangeLeft" style="width:40%;margin: 0 auto;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;script type="text/javascript"&gt;
      //create sliders with one handle (value[0])
      d3.select("#swift1Slider").call(d3.slider().axis(true).value([0]).on("slide",     function (evt, value) {
      var sliderVal1 = value.toFixed(2);
      d3.select('#slider1text').text(sliderVal1);
  }))
  d3.select("#swift2Slider").call(d3.slider().axis(true).value([0]).on("slide", function (evt, value) {
      var sliderVal2 = value.toFixed(2);
      d3.select('#slider2text').text(sliderVal2);
  }))
  
    d3.select("#swift3Slider").call(d3.slider().axis(true).value([0]).on("slide",       function (evt, value) {
      var sliderVal3 = value.toFixed(2);
      d3.select('#slider3text').text(sliderVal3);
  }))
  &lt;/script&gt;
  </code></pre>
  
  <p>Appreciate any help.</p>