Слайдер D3, занимающий лишь небольшую часть div

Question

Я следую за этим , чтобы сделать ось X для моего приложения, чтобы пользователь мог выбрать значение для X.

Я добавил это:

<div id="slider" class="epoch-axis-width epoch-axis-holder-border bottom-position"></div>

  <script>
      var slider = d3
          .sliderHorizontal()
          .min(0)
          .max(10)
          .step(1)
          .width(300)
          .fill("#008B8B")
          .displayValue(false)
          .on('onchange', val => {
          d3.select('#value').text(val);
      });

      d3.select('#slider')
          .append('svg')
          .attr('width', 500)
          .attr('height', 100)
          .append('g')
          .attr('transform', 'translate(30,30)')
          .call(slider);
  </script>

В CSS:

.epoch-axis-width {
    width:95%;
}

.epoch-axis-holder-border {
    border:1px solid black;
    height: 50px
}

.bottom-position {
    position:absolute;
    bottom:10px;
    right:10px;
}

Проблема I лица показана на изображении ниже:

Как видно, слайдер занимает только небольшую часть содержащего элемента div. Я хочу, чтобы он растянулся на всю длину.