diff --git a/.github/tip5-dragfeature.gif b/.github/tip5-dragfeature.gif
new file mode 100644
index 0000000..86cc2db
Binary files /dev/null and b/.github/tip5-dragfeature.gif differ
diff --git a/README.md b/README.md
index a3024ee..169bf31 100644
--- a/README.md
+++ b/README.md
@@ -200,7 +200,9 @@ This plugin bundles two classes, one for JavaScript and one for PHP, with the id
 1. Click on the left color preview to open the color picker.
 2. Click the arrow icon to switch between color spaces.
 3. When editing RGB or HSL colors, use the up and down arrow keys to adjust the value by +1 or -1.
-4. Hold the [meta key](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey) to adjust values by +10 or -10.
+4. Hold the [meta key](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey) (or the shift key) to adjust values by +10 or -10.
+5. Click on the grey unit indicator of a value then drag the mouse vertically to adjust the values on the fly.  
+   ![Drag-to-increment feature](./.github/tip5-dragfeature.gif)
 
 ## Alternatives
 
diff --git a/src/components/Colors.vue b/src/components/Colors.vue
index 5f8aac2..8c2d918 100644
--- a/src/components/Colors.vue
+++ b/src/components/Colors.vue
@@ -56,7 +56,7 @@ export default {
     props: {
         name: [String, Number],
         label: String,
-        value: Array,
+        value: String,
         contrast: [Boolean, Array],
         readability: Boolean,
         alpha: Boolean,
diff --git a/src/components/ColorsInput.vue b/src/components/ColorsInput.vue
index ddc76cc..60d71d6 100644
--- a/src/components/ColorsInput.vue
+++ b/src/components/ColorsInput.vue
@@ -2,7 +2,7 @@
     <div class="k-colors-units">
         <template v-if="space === 'rgb'">
             <label class="k-colors-label">
-                <span>R</span>
+                <span @mousedown.prevent="onMouseDown($event,$refs.r)">R</span>
                 <input
                     ref="r"
                     class="k-colors-input"
@@ -17,7 +17,7 @@
                 />
             </label>
             <label class="k-colors-label">
-                <span>G</span>
+                <span @mousedown.prevent="onMouseDown($event,$refs.g)">G</span>
                 <input
                     ref="g"
                     class="k-colors-input"
@@ -32,7 +32,7 @@
                 />
             </label>
             <label class="k-colors-label">
-                <span>B</span>
+                <span @mousedown.prevent="onMouseDown($event,$refs.b)">B</span>
                 <input
                     ref="b"
                     class="k-colors-input"
@@ -49,7 +49,7 @@
         </template>
         <template v-else-if="space === 'hsl'">
             <label class="k-colors-label">
-                <span>H</span>
+                <span @mousedown.prevent="onMouseDown($event,$refs.h)">H</span>
                 <input
                     ref="h"
                     class="k-colors-input"
@@ -64,7 +64,7 @@
                 />
             </label>
             <label class="k-colors-label">
-                <span>S</span>
+                <span @mousedown.prevent="onMouseDown($event,$refs.s)">S</span>
                 <input
                     ref="s"
                     class="k-colors-input"
@@ -79,7 +79,7 @@
                 />
             </label>
             <label class="k-colors-label">
-                <span>L</span>
+                <span @mousedown.prevent="onMouseDown($event,$refs.l)">L</span>
                 <input
                     ref="l"
                     class="k-colors-input"
@@ -119,7 +119,7 @@ export default {
     props: {
         color: {
             validator: function (value) {
-                value instanceof Color;
+                return value instanceof Color;
             }
         },
         space: String
@@ -142,6 +142,7 @@ export default {
     },
 
     methods: {
+        // Used by [onUp,onDown,onMouseUp,onMouseDown,onMouseMove] to modify the values
         store(value, input) {
             const fields = this.$refs;
             let values = {};
@@ -177,8 +178,8 @@ export default {
             }
 
             this.$emit('input', this.color.toString());
-        }
-    }
+        },
+    },
 };
 </script>
 
diff --git a/src/components/ColorsOpacity.vue b/src/components/ColorsOpacity.vue
index a38f080..c30bf50 100644
--- a/src/components/ColorsOpacity.vue
+++ b/src/components/ColorsOpacity.vue
@@ -3,6 +3,8 @@
         <input
             class="k-colors-input is-alpha"
             :value="opacity"
+            ref="a"
+            data-unit="opacity"
             type="text"
             min="0"
             max="100"
@@ -10,7 +12,7 @@
             @keydown.up.prevent="onUp"
             @keydown.down.prevent="onDown"
         />
-        <span>%</span>
+        <span @mousedown.prevent="onMouseDown($event,$refs.a)">%</span>
     </label>
 </template>
 
@@ -31,7 +33,7 @@ export default {
     },
 
     methods: {
-        store(value) {
+        store(value, inputEl) {
             const opacity = parseInt(value, 10);
             const space = this.color.toSpace();
 
diff --git a/src/mixins/input.js b/src/mixins/input.js
index b26ed97..209bcd8 100644
--- a/src/mixins/input.js
+++ b/src/mixins/input.js
@@ -1,23 +1,32 @@
 export default {
+    data: function(){
+        return {
+            // Data used to handle mouse-drag
+            dragActive: false,
+            dragStart: null,
+            dragAmount: 0,
+            dragInputRef: null,
+            dragValue: null,
+        }
+    },
+    created(){
+        // Bind to the document, as it will not be fired when there is no hover on the item.
+        document.addEventListener('mouseup', this.onMouseUp);
+        document.addEventListener('mousemove', this.onMouseDrag);
+    },
     methods: {
         onInput(event) {
             this.store(event.target.value);
         },
 
-        onUp(event) {
-            const input = event.target;
-            const max = input.getAttribute('max');
+        incrementInput(inputEl, step=1){
+            const max = inputEl.getAttribute('max');
 
             if (!max) {
                 return;
             }
 
-            let value = parseInt(input.value, 10);
-            let step = 1;
-
-            if (event.metaKey) {
-                step = 10;
-            }
+            let value = parseInt(inputEl.value, 10);
 
             value = Math.min(value + step, max);
 
@@ -25,31 +34,68 @@ export default {
                 value = 0;
             }
 
-            this.store(value, input);
+            this.store(value, inputEl);
+        },
+
+        amplifyStepFromEvent(e, step=1, amplification=10){
+            return (event && (event.metaKey || event.shiftKey)) ? (step*amplification) : step;
+        },
+
+        // Keyboard up arrow press
+        onUp(event) {
+            const input = event.target;
+            this.incrementInput(input, this.amplifyStepFromEvent(event,1));
+            return;
         },
 
+        // Keyboard down arrow press
         onDown(event) {
             const input = event.target;
-            const min = input.getAttribute('min');
+            this.incrementInput(input, this.amplifyStepFromEvent(event,-1));
+            return;
+        },
 
-            if (!min) {
-                return;
+        // Function to handle changing values by incrementing with the mouse
+        onMouseDown(e, inputRef){
+            if(!this.dragActive && inputRef && e.pageY){
+                this.dragActive = true;
+                this.dragInputRef = inputRef;
+                this.dragStart = e.pageY;
+                this.dragValue = parseInt(inputRef.value, 10);
             }
+        },
+        onMouseUp(e){
+            if(this.dragActive && this.dragInputRef && e.pageY){
+                // Get value
+                this.dragAmount = this.dragStart - e.pageY;
 
-            let value = parseInt(input.value, 10);
-            let step = 1;
+                // Apply color to store
+                this.dragInputRef.value = this.dragValue; // Needs to be reset so increment works. Note: Creates a lag in the value change.
+                if(this.dragInputRef && this.dragAmount!==0) this.incrementInput(this.dragInputRef, this.dragAmount);
 
-            if (event.metaKey) {
-                step = 10;
+                // Reset
+                this.dragActive = false;
+                this.dragAmount = 0;
+                this.dragInputRef = null;
+                this.dragValue = null;
             }
 
-            value = Math.max(min, value - step);
+        },
+        onMouseDrag(e){
+            if(this.dragActive && this.dragInputRef && e.pageY){
+
+                // Calc value
+                const max = this.dragInputRef.getAttribute('max');
+                if (!max) return;
+                this.dragAmount = this.dragStart - e.pageY;
+                let newValue = Math.min(this.dragValue + this.dragAmount, max);
+                if (newValue < 0) newValue = 0;
+
+                // Visually change the value without changing the store
+                this.dragInputRef.value = newValue;
 
-            if (value < 0) {
-                value = 0;
             }
 
-            this.store(value, input);
-        }
+        },
     }
 };