D3 Examples - d3-simple-slider for categorical data

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.
Source code and documentation available on Github.
xxxxxxxxxx
 
<!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>
​
<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>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>
​
<script>
  // Simple
  ticks=["low","medium low","principal","medium high","high"]
 var sliderSimple = d3
      .sliderBottom()
      .min(0)
      .max(4)
            .step(1)
      .width(parseInt(d3.select('body').style("width"))-80)
      .tickFormat(function(d,i){return ticks[i]})
      .ticks(5)
      .default(2)
      .handle(
        d3.symbol()
          .type(d3.symbolCircle)
          .size(500)
      )
      .fill("#206595")
      .on('onchange', val => {
        d3.select('g.parameter-value text').text(ticks[val])
        document.getElementById("value-simple").value=ticks[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);
​
    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>
​
    