D3 Examples - d3-simple-slider with added accessibility features

d3-simple-slider with added accessibility features
Renders a simple interactive slider with added accessibility features.
Handle is focusable, has tabindex, has role slider and aria-label
Up/right arrows increase amount by a small bit
Down/left arrows decrease amount by a small bit
PageUp/PageDown changes amount by a larger bit
Home/End move handle to start/end of range
<input> has a label
Source code and documentation available on Github.
xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>d3-simple-slider</title>
​
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="d3-simple-slider.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
​
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
  crossorigin="anonymous"
/>
​
  <style>
    body{
      max-width:700px;
    }
          .slider text{
        font-size: 18px;
      }
​
      #slider-simple text{
        font-size: 18px;
      }
​
      .parameter-value path{
        fill:#0F8243;
        stroke:white;
        stroke-width:1.5px;
      }
      .parameter-value path:focus{
        fill:#0F8243;
        stroke:orange;
        stroke-width:3px;
      }
    input{
        border: none;
        border-radius: 0;
        border-bottom: solid 1px #ddd;
        font-size: 18px;
        line-height: 32px;
        margin:16px 0;
        padding: 6px 0 0 0;
      }
      input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
      }
​
      input[type="number"] {
          -moz-appearance: textfield;
      }
    p{
        line-height: 32px;
        font-size: 18px;
        margin:16px 0;
        padding: 6px 0 10px 0;
      }
  </style>
</head>
<body>
<div class="container">
  <h1>Basic functionality</h1>
  <h2>Simple</h2>
  <div class="row align-items-center">
    <div class="col-sm-6"><label for="value-simple">Label for number</label></div>
        <div class="col-sm-6"><input id="value-simple" type="number" value="175000" oninput="sliderchange()" min="0" max="400000"></div>
        <div class="col-sm-12"><div id="slider-simple"></div></div>
  </div>
</div>
​
<script>
  // Simple
 var sliderSimple = d3
      .sliderBottom()
      .min(0)
      .max(400000)
      .width(parseInt(d3.select('body').style("width"))-80)
      .tickFormat(d3.format(',.0f'))
      .ticks(5)
      .default(175000)
      .handle(
        d3.symbol()
          .type(d3.symbolCircle)
          .size(500)
      )
      .fill("#206595")
      .on('onchange', val => {
        document.getElementById("value-simple").value=d3.format('.0f')(val)
      });
​
    var gSimple = d3
      .select('div#slider-simple')
      .append('svg')
      .attr('width', parseInt(d3.select('body').style("width")))
      .attr('height', 100)
      .append('g')
      .attr('transform', 'translate(30,30)');
​
    gSimple.call(sliderSimple);
​
    document.getElementById("value-simple").value=d3.format('.0f')(sliderSimple.value());
​
    function sliderchange(){
      sliderSimple.silentValue(document.getElementById('value-simple').value)
    }
​
    d3.select('body').on('keydown',function(){
      if(document.getElementById("handle")===document.activeElement){//if handle is focussed
        var max = document.getElementById('value-simple').max
        var min = document.getElementById('value-simple').min
​
        if (d3.event.key=='ArrowLeft') {
          if(+document.getElementById('value-simple').value-100<min){
            sliderSimple.silentValue(min)
            document.getElementById("value-simple").value=min
          }else{
            sliderSimple.silentValue(+document.getElementById('value-simple').value-100)
            document.getElementById("value-simple").value=+document.getElementById("value-simple").value-100
          }
        }
        if (d3.event.key=='ArrowUp') {
          d3.event.preventDefault();
          if(+document.getElementById('value-simple').value+100>max){
            sliderSimple.silentValue(max)
            document.getElementById("value-simple").value=max
          }else{
            sliderSimple.silentValue(+document.getElementById('value-simple').value+100)
            document.getElementById("value-simple").value=+document.getElementById("value-simple").value+100
          }
        }
        if (d3.event.key=='ArrowRight') {
          if(+document.getElementById('value-simple').value+100>max){
            sliderSimple.silentValue(max)
            document.getElementById("value-simple").value=max
          }else{
            sliderSimple.silentValue(+document.getElementById('value-simple').value+100)
            document.getElementById("value-simple").value=+document.getElementById("value-simple").value+100
          }              }
        if (d3.event.key=='ArrowDown') {
          d3.event.preventDefault();
          if(+document.getElementById('value-simple').value-100<min){
            sliderSimple.silentValue(min)
            document.getElementById("value-simple").value=min
          }else{
            sliderSimple.silentValue(+document.getElementById('value-simple').value-100)
            document.getElementById("value-simple").value=+document.getElementById("value-simple").value-100
          }
        }
        if (d3.event.key=='PageDown') {
          d3.event.preventDefault();
          if(+document.getElementById('value-simple').value-1000<min){
            sliderSimple.silentValue(min)
            document.getElementById("value-simple").value=min
          }else{
            sliderSimple.silentValue(+document.getElementById('value-simple').value-1000)
            document.getElementById("value-simple").value=+document.getElementById("value-simple").value-1000
          }
        }
        if (d3.event.key=='PageUp') {
          d3.event.preventDefault();
          if(+document.getElementById('value-simple').value+1000>max){
            sliderSimple.silentValue(max)
            document.getElementById("value-simple").value=max
          }else{
            sliderSimple.silentValue(+document.getElementById('value-simple').value+1000)
            document.getElementById("value-simple").value=+document.getElementById("value-simple").value+1000
          }              }
        if (d3.event.key=='Home') {
          d3.event.preventDefault();
          sliderSimple.silentValue(min)
          document.getElementById("value-simple").value=min
        }
        if (d3.event.key=='End') {
          d3.event.preventDefault();
          sliderSimple.silentValue(max)
          document.getElementById("value-simple").value=max
        }
      }
    })
​
</script>
</body>
</html>
​
    