如何制作字体大小的自定义范围滑块? [英] How to make a customized range slider for font-size?
问题描述
我有一个场景,我必须使用范围滑块来设置字体大小,但是我有一个普通的滑块,我需要在滑动时在工具提示上显示字体大小.
JS:
angular.module('textSizeSlider',[]).directive('textSizeSlider',['$ document',function($ document){返回 {限制:"E",模板:< 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.textSize = scope.value;scope.$ watch('textSize',function(size){$ document [0] .body.style.fontSize =大小+ scope.unit;});}}}]);
这是pl子链接:
您可以添加一个跨度,然后通过将其宽度乘以当前值除以最大值,将其相对于范围滑动器相对移动.
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用于补偿填充var ratio =($ scope.textSize-$ scope.min)/($ scope.max-$ scope.min);var position = width * ratio;$ scope.position = Math.trunc(位置);}}]返回 {控制器:Ctrl,限制:"E",模板:< 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.textSize = scope.value;scope.$ watch('textSize',function(size){$ document [0] .body.style.fontSize =大小+ scope.unit;scope.updatepointer();});}}}]);
我在此处添加了用于指针的css:
.pointer {高度:40px;宽度:40px;border-radius:20px 20px 0 20px;背景颜色:#FFF;显示:块;变换:rotate(45deg);位置:绝对;顶部:-44px;margin-left:8px;}.pointer span {显示:inline-block;变换:rotate(-45deg);margin-left:12px;边距顶部:14像素;}
工作的监听器在这里: https://plnkr.co/edit/9bYR1aprS3Xn7YWyB6kj?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.
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:
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
这篇关于如何制作字体大小的自定义范围滑块?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!