Figma like input field in Angular using Directives

People who are familiar with Figma would have noticed that the input fields support dragging to increase or decrease values. Instead of having to click on the input field first and then type the number in, the dragging feature is really handy as you can easily get the desired value by dragging.

We can build something like that using Angular directives. We’ll use all the latest features of Angular in this experiment.

We have made a super simple Scrubber directive in Angular which can help us build input fields similar to what Figma has. Makes is super easy for user to interact with numeric inputs.

Code & Demo

Do add your thoughts in the comments section. Stay Safe ❤️