<div ng-app="app" ng-controller="rangeCtrl">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">

    <line stroke-dasharray="{{dashArrayLength}} {{dashArraySpacing}}" stroke-dashoffset="{{dashOffset}}" x1="0" y1="10" x2="500" y2="10" />

    <style><![CDATA[
line{
    stroke: red;
    stroke-width: 3;
}
]]></style>
  </svg>
  <div class="length">Length: 500</div>

  <div class="attr-type">
    stroke-dasharray = "{{dashArrayLength}} {{dashArraySpacing}}";
  </div>

  <input class="dash1" type="range" name="points" min="0" value="{{dashArrayLength}}" max="500" ng-model="dashArrayLength"><label>length</label>
  
  <!-- sorry, purists -->
  <div></div>

  <input class="dash2" type="range" name="points" min="0" value="{{dashArraySpacing}}" max="500" ng-model="dashArraySpacing"><label>spacing</label>

  <div class="attr-type">
    stroke-dashoffset = "{{dashOffset}}";
  </div>
  
  <input type="range" name="points" min="0" value="{{dashOffset}}" ng-model="dashOffset" max="500">
</div>

@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:600);

body {
  height: 100vh;
  width: 100vw;
  position: relative;
  margin: 2em auto auto auto;
  text-align: center;
  font-family: 'Source Code Pro';
  & > 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;
}

var app = angular.module('app', []);

app.controller('rangeCtrl',function($scope) {
  $scope.dashArrayLength= 50;
  $scope.dashArraySpacing= 50;
  $scope.dashOffset= 0;
});