Slider causes dropdowns to break

[gentinex]

I found that when I inserted a slider, my dropdowns failed to expand. Below is reproducible HTML:

<link rel="stylesheet" href="d3.slider.css" />
<div class="testSlider"></div>
<hr>
<select>test
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3.slider.js"></script>
<script>
var slider = d3.select(".testSlider")
    .call(d3.slider()
            .axis(true)
            .value([0, 100])
            .on("slide", function(evt, value) {
                console.log(value[0]);
                    }));

</script>

[ramnathv]

The issue is that the default dimensions of the svg for the slider end up appearing on top of your select dropdown. Easy fix is to set a smaller margin for your slider, which can be done using

myslider = d3.slider()
  .margin(20)