From c0bc0e03c0be026c5fd4205ff38e875fa60482f8 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Mon, 24 Apr 2023 21:56:25 +1000
Subject: [PATCH] added range type

---
 resources/js/components/SMInput.vue | 54 ++++++++++++++++++++++++++++-
 1 file changed, 53 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/SMInput.vue b/resources/js/components/SMInput.vue
index 99336e4..db2ee13 100644
--- a/resources/js/components/SMInput.vue
+++ b/resources/js/components/SMInput.vue
@@ -21,6 +21,25 @@
                     >{{ label }}</label
                 >
             </template>
+            <template v-else-if="props.type == 'range'">
+                <label
+                    class="control-label control-label-range"
+                    v-bind="{ for: id }"
+                    >{{ label }}</label
+                >
+                <input
+                    :id="id"
+                    type="range"
+                    class="range-control"
+                    v-bind="{
+                        min: props.min,
+                        max: props.max,
+                        step: props.step,
+                    }"
+                    :value="value"
+                    @input="handleInput" />
+                <span class="range-control-value">{{ value }}</span>
+            </template>
             <template v-else-if="props.type == 'select'">
                 <label
                     class="control-label control-label-select"
@@ -156,7 +175,7 @@ const props = defineProps({
         required: false,
     },
     modelValue: {
-        type: String,
+        type: [String, Number],
         default: undefined,
         required: false,
     },
@@ -210,6 +229,21 @@ const props = defineProps({
         default: "",
         required: false,
     },
+    min: {
+        type: Number,
+        default: undefined,
+        required: false,
+    },
+    max: {
+        type: Number,
+        default: undefined,
+        required: false,
+    },
+    step: {
+        type: Number,
+        default: undefined,
+        required: false,
+    },
 });
 
 const slots = useSlots();
@@ -623,6 +657,24 @@ const handleMediaSelect = async () => {
                     max-height: 300px;
                 }
             }
+
+            .control-label-range {
+                transform: none !important;
+            }
+
+            .range-control {
+                margin-top: 24px;
+                width: 100%;
+            }
+
+            .range-control-value {
+                margin-top: 22px;
+                padding-left: 16px;
+                font-size: 90%;
+                font-weight: 600;
+                width: 48px;
+                text-align: right;
+            }
         }
     }