Add readonly property

README.md

@@ -142,6 +142,7 @@ max | Number | Maximum value of the control | 100
 min | Number | Minimum value of the control | 0
 stepSize | Number | Smallest increment the value can change by | 1
 disabled | Boolean | Set to true to disable the knob | false
+readOnly | Boolean | Set to true to disable interaction with the knob while showing its value | false
 size | Number | Visual size of the control in `px` (or `%` if `responsive` is `true`) | 100
 primaryColor | String | Color of the value arc | #409eff
 secondaryColor | String | Color of the rest of the control | #dcdfe6

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-knob-control",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "A rotary knob control for Vue.js",
   "scripts": {
     "build": "vue build --target lib --name vue-knob-control src/KnobControl.vue"
@@ -20,4 +20,4 @@
     "url": "git+https://github.com/kramer99/vue-knob-control"
   },
   "devDependencies": {}
-}
+}

src/KnobControl.vue

@@ -87,6 +87,10 @@
                 type: Boolean,
                 default: false
             },
+            'readonly': {
+                type: Boolean,
+                default: false
+            },
             'size': {
                 type: Number,
                 default: 100
@@ -210,46 +214,46 @@
                 this.$emit('input', Math.round((v - this.min) / this.stepSize) * this.stepSize + this.min);
             },
             onClick (e) {
-                if (!this.disabled) {
+                if (!this.disabled && !this.readonly) {
                     this.updatePosition(e.offsetX, e.offsetY);
                 }
             },
             onMouseDown (e) {
-                if (!this.disabled) {
+                if (!this.disabled && !this.readonly) {
                     e.preventDefault();
                     window.addEventListener('mousemove', this.onMouseMove);
                     window.addEventListener('mouseup', this.onMouseUp);
                 }
             },
             onMouseUp (e) {
-                if (!this.disabled) {
+                if (!this.disabled && !this.readonly) {
                     e.preventDefault();
                     window.removeEventListener('mousemove', this.onMouseMove);
                     window.removeEventListener('mouseup', this.onMouseUp);
                 }
             },
             onTouchStart (e) {
-                if (!this.disabled) {
+                if (!this.disabled && !this.readonly) {
                     e.preventDefault();
                     window.addEventListener('touchmove', this.onTouchMove);
                     window.addEventListener('touchend', this.onTouchEnd);
                 }
             },
             onTouchEnd (e) {
-                if (!this.disabled) {
+                if (!this.disabled && !this.readonly) {
                     e.preventDefault();
                     window.removeEventListener('touchmove', this.onTouchMove);
                     window.removeEventListener('touchend', this.onTouchEnd);
                 }
             },
             onMouseMove (e) {
-                if (!this.disabled) {
+                if (!this.disabled && !this.readonly) {
                     e.preventDefault();
                     this.updatePosition(e.offsetX, e.offsetY);
                 }
             },
             onTouchMove (e) {
-                if (!this.disabled && e.touches.length == 1) {
+                if (!this.disabled && this.readonly && e.touches.length == 1) {
                     const boundingClientRect = this.$el.getBoundingClientRect();
                     const touch = e.targetTouches.item(0);
                     const offsetX = touch.clientX - boundingClientRect.left;