CODEWITHSUNDEEP
javascriptangularjs
anub
anub

Reputation: 527

How to make a customized range slider for font-size?

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.

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;
        });
      }
    }
  }]);

Here is the plunker link:

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

Expected result must be shown in below figure:

enter image description here

Upvotes: 0

Views: 820

Answers (1)

nixkuroi
nixkuroi

Reputation: 2279

You can add a span and then move it relative to your range slider by taking the width of the slider and multiplying it by the current value divided by the max. 

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();
        });
      }
    }
  }]);

I added the css for pointer here:

.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;


}

The working plunker is here: https://plnkr.co/edit/9bYR1aprS3Xn7YWyB6kj?p=preview

Upvotes: 1

Related Questions