I have implemented a custom CSS range slider that changes the color of the track as I move through it. The initial color is grey, but it changes as I slide. This functionality works perfectly in FireFox and IE.
However, I am facing an issue with Chrome. How can I resolve this?
Here is the HTML code:
<text-size-slider min="12" max="36" unit="px" value="18" step="0">
<!-- Custom AngularJS Directive Ends Here -->
</text-size-slider>
And here is the JavaScript code:
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 }"><small>T</small>T</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 }"><small>T</small>T</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();
});
}
}
}]);
You can view the Plunker link here.
Expected output: