vue-draggable-number v1.0.3

Vue Draggable Number

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

Written in Typescript.

Full demo: https://sunyatasattva.github.io/vue-draggable-number/

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

The generated HTML looks like this:

<div class="vue-draggable-number-container ${generatedInputName}">
  <label for="${generatedInputName}"> {{ label }} </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.