title: How to make a customized range slider for font-size?
body: <p>I have a scenario,in that I have to use the range slider for font size,But  I have a normal slider,I need to display the font-size on tool-tip when it slides.</p>
  
  <p>JS:</p>
  
  <pre><code>angular.module('textSizeSlider', [])
    .directive('textSizeSlider', ['$document', function ($document) {
      return {
        restrict: 'E',
        template: '&lt;div class="text-size-slider"&gt;&lt;span class="small-letter" ng-style="{ fontSize: min + unit }"&gt;A&lt;/span&gt; &lt;input type="range" min="{{ min }}" max="{{ max }}" step="{{ step || 0 }}" ng-model="textSize" class="slider" value="{{ value }}" /&gt; &lt;span class="big-letter" ng-style="{ fontSize: max + unit }"&gt;A&lt;/span&gt;&lt;/div&gt;',
        scope: {
          min: '@',
          max: '@',
          unit: '@',
          value: '@',
          step: '@'
        },
        link: function (scope, element, attr) {
          scope.textSize = scope.value;
          scope.$watch('textSize', function (size) {
            $document[0].body.style.fontSize = size + scope.unit;
          });
        }
      }
    }]);
  </code></pre>
  
  <p>Here is the plunker link:</p>
  
  <p><a href="https://plnkr.co/edit/uzggs7sVA5KCuuHxQ2Yh?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/uzggs7sVA5KCuuHxQ2Yh?p=preview</a></p>
  
  <p>Expected result must be shown in below figure:</p>
  
  <p><a href="https://i.stack.imgur.com/N7Cj0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N7Cj0.png" alt="enter image description here"></a></p>