Slider example

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
 <script src="https://d3js.org/d3.v3.min.js"></script>
   <script src="d3.slider.js"></script>
  <link rel="stylesheet" href="d3.slider.css" />  
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  
  <h2>Default slider</h2>
  <code>d3.slider()</code>
  
  <div id='ggrade'></div>
  <script>
    
    //d3.select('#ggrade').call(d3.slider().value(25));
    
    let d_grade = 25;
    let e_grade = 25;
    let f_grade = 25;
    let g_grade = 25;
    
    var gSlider = d3.slider().value(g_grade)
       .max(100)
       .step(1)
       .axis(true)
    	.on("slideend", function(evt,value) {
        let totalValue = value + f_grade+ d_grade + e_grade

if (totalValue > 100){
           
           g_grade = 100 - f_grade - d_grade - e_grade;
           
         } else {
           
           g_grade = value;
           
         }

gSlider.value(g_grade)
      })
    
        
    d3.select('#ggrade')
      .call(gSlider)
     
      
  </script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js