add range

educorvi · Dec 3, 2024 · b32828b · b32828b
1 parent fec9343
commit b32828b
Show file tree

Hide file tree

Showing 6 changed files with 261 additions and 73 deletions.
diff --git a/vue-json-form/src/exampleSchemas/showcase/schema.json b/vue-json-form/src/exampleSchemas/showcase/schema.json
@@ -40,7 +40,10 @@
             "title": "Rating",
             "description": "Please rate us",
             "type": "integer",
-            "maximum": 50
+            "maximum": 5,
+            "minimum": 0,
+            "step": 1,
+            "default": 3
         },
         "weekdays": {
             "type": "array",

diff --git a/vue-json-form/src/exampleSchemas/showcase/ui.json b/vue-json-form/src/exampleSchemas/showcase/ui.json
@@ -75,7 +75,9 @@
               {
                 "type": "Control",
                 "scope": "/properties/rating",
-                "options": {}
+                "options": {
+                  "range": true
+                }
               }
             ]
           },

diff --git a/vue-json-form/src/renderings/bootstrap/controls/NumberControl.vue b/vue-json-form/src/renderings/bootstrap/controls/NumberControl.vue
@@ -20,14 +20,17 @@ const step = computed(() => {
 </script>
 
 <template>
-    <b-form-input
-        v-model.number="formData[savePath]"
-        class="vjf_input"
-        :id="id"
-        :step="step"
-        :min="jsonElement.minimum"
-        :max="jsonElement.maximum"
-    />
+    <div>
+        <b-form-input
+            v-model.number="formData[savePath]"
+            class="vjf_input"
+            :id="id"
+            :step="step"
+            :min="jsonElement.minimum"
+            :max="jsonElement.maximum"
+            :type="layoutElement.options?.range ? 'range' : 'number'"
+        />
+    </div>
 </template>
 
 <style scoped></style>