Wie mache ich einen benutzerdefinierten Bereich Slider für Schriftgröße?

Question

Ich habe ein Szenario, in dem ich den Bereich Schieberegler für die Schriftgröße verwenden muss, aber ich habe einen normalen Schieberegler, muss ich die Schriftgröße auf Tool-Tipp anzeigen, wenn es gleitet.

JS:

angular.module('textSizeSlider', []) 
    .directive('textSizeSlider', ['$document', function ($document) { 
    return { 
     restrict: 'E', 
     template: '<div class="text-size-slider"><span class="small-letter" ng-style="{ fontSize: min + unit }">A</span> <input type="range" min="{{ min }}" max="{{ max }}" step="{{ step || 0 }}" ng-model="textSize" class="slider" value="{{ value }}" /> <span class="big-letter" ng-style="{ fontSize: max + unit }">A</span></div>', 
     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; 
     }); 
     } 
    } 
    }]); 

Hier ist der Plunker Link:

https://plnkr.co/edit/uzggs7sVA5KCuuHxQ2Yh?p=preview

Erwartetes Ergebnis in der folgenden Abbildung gezeigt werden muß:

Answer 1

Sie können eine hinzufügen spanne und verschiebe es dann relativ Wenn Sie die Breite des Schiebereglers ändern und ihn mit dem aktuellen Wert dividieren.

angular.module('textSizeSlider', []) 
    .directive('textSizeSlider', ['$document', function ($document) { 

    var ctrl = ['$scope', '$element', function ($scope, $element) { 
     $scope.position = 0; 
     $scope.updatepointer =() => { 
      var input = $element.find("input"); 
      var width = input[0].offsetWidth -16; // 16 for offsetting padding 
      var ratio = ($scope.textSize - $scope.min)/($scope.max - $scope.min); 
      var position = width * ratio; 
      $scope.position = Math.trunc(position); 

     } 

    }] 

    return { 
     controller: ctrl, 
     restrict: 'E', 
     template: '<div class="text-size-slider"><span class="pointer" style="left:{{position}}px;"><span>{{textSize}}</span></span><span class="small-letter" ng-style="{ fontSize: min + unit }">A</span> <input type="range" min="{{ min }}" max="{{ max }}" step="{{ step || 0 }}" ng-model="textSize" class="slider" value="{{ value }}" ng-change="updatepointer()" /> <span class="big-letter" ng-style="{ fontSize: max + unit }">A</span></div>', 
     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; 
      scope.updatepointer(); 
     }); 
     } 
    } 
    }]); 

Ich habe die CSS für Zeiger hier:

.pointer { 
    height: 40px; 
    width: 40px; 
    border-radius:20px 20px 0 20px; 
    background-color:#FFF; 
    display:block; 
    transform: rotate(45deg); 
    position:absolute; 
    top: -44px; 
    margin-left:8px; 

} 

.pointer span { 
    display: inline-block; 
    transform: rotate(-45deg); 
    margin-left:12px; 
    margin-top: 14px; 


} 

Die Arbeits Plunker ist hier: https://plnkr.co/edit/9bYR1aprS3Xn7YWyB6kj?p=preview