<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   @font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/sourcecodepro/v23/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DBKXtMlrSQ.ttf) format('truetype');
}
body {
  height: 100vh;
  width: 100vw;
  position: relative;
  margin: 2em auto auto auto;
  text-align: center;
  font-family: 'Source Code Pro';
}
body > div {
  margin: auto;
  width: 100%;
}
svg {
  height: 1em;
}
.length {
  color: #c1c1c1;
  margin-bottom: 1.5em;
}
.attr-type {
  margin-bottom: 1em;
}
label {
  font-size: 0.8em;
  color: #a9a9a9;
}
.dash2 {
  margin-bottom: 3em;
}
  </style>
 </head>
 <body translate="no">
  <div ng-app="app" ng-controller="rangeCtrl">
   <div class="length">
    Length: 500
   </div>
   <div class="attr-type">
    stroke-dasharray = "{{dashArrayLength}} {{dashArraySpacing}}";
   </div>
   <input class="dash1" max="500" min="0" name="points" ng-model="dashArrayLength" type="range" value="{{dashArrayLength}}"/>
   <label>
    length
   </label>
   <div>
   </div>
   <input class="dash2" max="500" min="0" name="points" ng-model="dashArraySpacing" type="range" value="{{dashArraySpacing}}"/>
   <label>
    spacing
   </label>
   <div class="attr-type">
    stroke-dashoffset = "{{dashOffset}}";
   </div>
   <input max="500" min="0" name="points" ng-model="dashOffset" type="range" value="{{dashOffset}}"/>
  </div>
 </body>
</html>
