js var does not get value of document.getElementById( ).value

I am working on a d3 pie chart with an input range element to dynamically generate values that should determine the pie chart.

• If I add value for var selectedYear in app.js manually e.g. ( var selectedYear = 1967 ) the pie chart works

• If I add value for var selectedYear dynamically through getElementById method, e.g.(var selectedYear = document.getElementById("sliderId").value) a wrong value 100, which I guess is the standard max value for input range, is retrieved and so the pie chart does not get created.

What is my mistake here? I suspect it has to do with the dom.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pie Chart Exercise</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <svg
    version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg" >
  </svg>
  <script src="https://d3js.org/d3.v4.js"></script>
  <div id="sliderDiv">
    <label id="label1" for="points">Choose a year:</label>
    <input type="range" id="sliderId" name="slider" step="1" value='1967' >
  </div>
  <script src="birthData.js"></script>
  <script src="app.js"></script>
</body>
</html>

app.js

var width = 600,
    height = 600;
var selectedYear = 1967; //parseInt(document.getElementById("sliderId").value); doe not work
var radius = Math.min(width, height) / 2;


var yearData = birthData.filter(d => d.year === selectedYear);
var yearDataBirths = yearData.map(d => {return d.births});
var rangeDataYears = birthData.map(d => {return d.year});

var minDataYear = d3.min(rangeDataYears);
var maxDataYear = d3.max(rangeDataYears);

function sliderInputCode(){
var sliderInput = document.getElementById("sliderId");
sliderInput.setAttribute('min',minDataYear);
sliderInput.setAttribute('max',maxDataYear);
var selectedYearV2 = parseInt(document.getElementById("sliderId").value);
};
sliderInputCode();

var colorScale = d3.scaleOrdinal()
                    .domain( yearDataBirths)
                    .range(d3.schemeCategory20);

var svg = d3.select('svg')
            .attr('width',width)
            .attr('height',height)
          .append('g')
            .attr('transform','translate('+ width/2 + ','+ height/2 + ')')
            .classed('chart', true);

var pie = d3.pie();
var arc = d3.arc()
              .innerRadius(150)
              .outerRadius(radius);

var arcs = svg.selectAll('.arc')
              .data(pie(yearDataBirths))
              .enter()
              .append('g')

              .attr('class','arc')
                .append('path')
                .attr('fill', (d,i) => colorScale(i))
                .attr('d', arc);

style.css

svg {
  margin: 0 auto;
  display: block;
}

.arc {
  stroke: black;
}

#label1{
  display:block;
}
#sliderDiv{
            margin: 0 auto;
            margin-top: 2em;
            display: block;
            text-align: center;
        }

        input[type="text"] {
             display: block;
             margin : 0 auto;
        }

birthData.js ( I abbreviated the data here from 1967 to 1969 for shortness and oversightness. Original data goes from 1967 to 2014 )

var birthData = [
  { 
    "year": 1967, 
    "month": "January", 
    "births": 31502 
  },
  { 
    "year": 1967, 
    "month": "February", 
    "births": 26703 
  },
  { 
    "year": 1967, 
    "month": "March", 
    "births": 28853 
  },
  { 
    "year": 1967, 
    "month": "April", 
    "births": 26958 
  },
  { 
    "year": 1967, 
    "month": "May", 
    "births": 28591 
  },
  { 
    "year": 1967, 
    "month": "June", 
    "births": 29545 
  },
  { 
    "year": 1967, 
    "month": "July", 
    "births": 30086 
  },
  { 
    "year": 1967, 
    "month": "August", 
    "births": 30947 
  },
  { 
    "year": 1967, 
    "month": "September", 
    "births": 32338 
  },
  { 
    "year": 1967, 
    "month": "October", 
    "births": 32296 
  },
  { 
    "year": 1967, 
    "month": "November", 
    "births": 30326 
  },
  { 
    "year": 1967, 
    "month": "December", 
    "births": 28994 
  },
  { 
    "year": 1968, 
    "month": "January", 
    "births": 30691 
  },
  { 
    "year": 1968, 
    "month": "February", 
    "births": 27902 
  },
  { 
    "year": 1968, 
    "month": "March", 
    "births": 29706 
  },
  { 
    "year": 1968, 
    "month": "April", 
    "births": 28800 
  },
  { 
    "year": 1968, 
    "month": "May", 
    "births": 28957 
  },
  { 
    "year": 1968, 
    "month": "June", 
    "births": 28245 
  },
  { 
    "year": 1968, 
    "month": "July", 
    "births": 29111 
  },
  { 
    "year": 1968, 
    "month": "August", 
    "births": 29793 
  },
  { 
    "year": 1968, 
    "month": "September", 
    "births": 31402 
  },
  { 
    "year": 1968, 
    "month": "October", 
    "births": 31429 
  },
  { 
    "year": 1968, 
    "month": "November", 
    "births": 29516 
  },
  { 
    "year": 1968, 
    "month": "December", 
    "births": 28266 
  },
  { 
    "year": 1969, 
    "month": "January", 
    "births": 436201 
  },
  { 
    "year": 1969, 
    "month": "February", 
    "births": 401016 
  },
  { 
    "year": 1969, 
    "month": "March", 
    "births": 439157 
  },
  { 
    "year": 1969, 
    "month": "April", 
    "births": 419464 
  },
  { 
    "year": 1969, 
    "month": "May", 
    "births": 430195 
  },
  { 
    "year": 1969, 
    "month": "June", 
    "births": 425021 
  },
  { 
    "year": 1969, 
    "month": "July", 
    "births": 455342 
  },
  { 
    "year": 1969, 
    "month": "August", 
    "births": 454915 
  },
  { 
    "year": 1969, 
    "month": "September", 
    "births": 451233 
  },
  { 
    "year": 1969, 
    "month": "October", 
    "births": 448391 
  },
  { 
    "year": 1969, 
    "month": "November", 
    "births": 424455 
  },
  { 
    "year": 1969, 
    "month": "December", 
    "births": 445127 
  }]