vue-draggable-number A Photoshop-inspired, VueJS number input component in which the user can modify the value by dragging with the mouse.

Vue Draggable Number

A simple number input component that users can edit by dragging the label around, inspired by Photoshop UX.

Written in Typescript.

Basic usage

<template> <div> <draggable-number-input v-model= "someNumber" label= "My number" /> </div> </template> <script> export default { data () { return { someNumber : 1 , }; }, }; </script>

This will create an unstyled HTML5 <input type="number"> tied to someNumber , the value of which the user can easily increase or decrease by dragging (respectively) up and down on the label.

The only two required properties are label and value (in the example case, handled through the v-model syntactic sugar).

Allowed props

Property Description Type Default Options dragDirection The axis in which the user has to drag to increase/decrease the number. String “Y” “X” | “Y” hideLabel Whether or not to hide the label. Boolean false true false label The label to show next to the input. It is also used to generate the name of the input and the class of the wrapper. String - - max Maximum allowed value. Number Infinity - min Minimum allowed value. Number -Infinity - step The amount by which the value is increased on mouse movement. Number 1 - value The value of the input. Number - -

The generated HTML looks like this:

<div class= "vue-draggable-number-container ${generatedInputName}" > <label for= "${generatedInputName}" > </label> <input type= "number" name= "${generatedInputName}" /> </div>

Where ${generatedInputName} is draggable-number- plus the kebab-cased label.

These are useful to target the component for styling.

Advanced demo: keeping the aspect ratio

As mentioned, the inspiration from this component came from Adobe Photoshop’s UX. Hence, a usecase for it could be sizing inputs. We can imagine we have an element we want to resize, while keeping the aspect-ratio of the element constant.

We would have something like this: