d3-simple-slider for categorical data

Renders a simple interactive slider with added accessibility features.

Handle is focusable, has tabindex 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.

Inspired by The New York Times Is It Better to Rent or Buy?

Source code and documentation available on Github.

forked from johnwalley's block: d3-simple-slider

forked from henryjameslau's block: d3-simple-slider with added accessibility features

<!DOCTYPE html>

<head>
<meta charset="utf-8" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>d3-simple-slider</title>

#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>Categorical slider</h1>
  <div class="row align-items-center">
    <div class="col-sm-6"><p>Label for category</p></div>
        <div class="col-sm-6"><input id="value-simple" type="text" value="principal" step="1" min="0" max="4"></div>
        <div class="col-sm-12"><div id="slider-simple"></div></div>
  </div>
</div>

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);

d3.select('g.parameter-value text').text('principal')
    document.getElementById("value-simple").value=ticks[sliderSimple.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'){
          var index=ticks.indexOf(document.getElementById('value-simple').value)
          if(index>0){
            document.getElementById('value-simple').value=ticks[index-1]
            sliderSimple.value(index-1)
          }
        }
        if(d3.event.key=='ArrowDown'){
          var index=ticks.indexOf(document.getElementById('value-simple').value)
          if(index>0){
            document.getElementById('value-simple').value=ticks[index-1]
            sliderSimple.value(index-1)
          }
        }
        if(d3.event.key=='PageDown'){
          var index=ticks.indexOf(document.getElementById('value-simple').value)
          if(index>0){
            document.getElementById('value-simple').value=ticks[index-1]
            sliderSimple.value(index-1)
          }
        }
        if(d3.event.key=='Home'){
            document.getElementById('value-simple').value=ticks[min]
            sliderSimple.value(min)
        }

if(d3.event.key=='ArrowRight'){
          var index=ticks.indexOf(document.getElementById('value-simple').value)
          if(index<4){
            document.getElementById('value-simple').value=ticks[index+1]
            sliderSimple.value(index+1)
          }
        }
        if(d3.event.key=='ArrowUp'){
          var index=ticks.indexOf(document.getElementById('value-simple').value)
          if(index<4){
            document.getElementById('value-simple').value=ticks[index+1]
            sliderSimple.value(index+1)
          }
        }
        if(d3.event.key=='PageUp'){
          var index=ticks.indexOf(document.getElementById('value-simple').value)
          if(index<4){
            document.getElementById('value-simple').value=ticks[index+1]
            sliderSimple.value(index+1)
          }
        }
        if(d3.event.key=='End'){
            document.getElementById('value-simple').value=ticks[max]
            sliderSimple.value(max)
        }
      }
    })
</script>
</body>
</html>

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