diff --git a/client/src/components/Form/Elements/FormNumber.vue b/client/src/components/Form/Elements/FormNumber.vue
new file mode 100644
index 00000000000..b00602b558f
--- /dev/null
+++ b/client/src/components/Form/Elements/FormNumber.vue
@@ -0,0 +1,55 @@
+<template>
+    <b-row align-v="center">
+        <b-col :sm="isSliderVisible ? 4 : false">
+            <b-form-input v-model="currentValue" size="sm" />
+        </b-col>
+        <b-col class="pl-0" v-if="isSliderVisible">
+            <b-form-input v-model="currentValue" :min="min" :max="max" type="range" />
+        </b-col>
+    </b-row>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: [String, Number],
+            required: true,
+        },
+        type: {
+            type: String,
+            required: true,
+            validator: (prop) => ["integer", "float"].includes(prop),
+        },
+        min: {
+            type: Number,
+            required: false,
+            default: undefined,
+        },
+        max: {
+            type: Number,
+            required: false,
+            default: undefined,
+        },
+    },
+    created() {},
+    computed: {
+        isSliderVisible() {
+            return this.min && this.max && this.max > this.min;
+        },
+        currentValue: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.$emit("input", val);
+            },
+        },
+    },
+};
+</script>
+<style scoped>
+.form-number-input {
+    max-width: 3.6rem;
+}
+</style>
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index f13fe89ac8e..7edcd5b7e3a 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -23,6 +23,14 @@
         <div v-if="showField" class="ui-form-field" :data-label="title">
             <FormBoolean v-if="type == 'boolean'" v-model="currentValue" :id="id" />
             <FormHidden v-else-if="isHiddenType" v-model="currentValue" :id="id" :info="attrs['info']" />
+            <FormNumber
+                v-else-if="type == 'integer' || type == 'float'"
+                :max="attrs.max"
+                :min="attrs.min"
+                :type="type"
+                v-model="currentValue"
+                :id="id"
+            />
             <FormColor v-else-if="type == 'color'" v-model="currentValue" :id="id" />
             <FormDirectory v-else-if="type == 'directory_uri'" v-model="currentValue" />
             <FormParameter
@@ -48,13 +56,18 @@ import FormHidden from "./Elements/FormHidden";
 import FormInput from "./Elements/FormInput";
 import FormParameter from "./Elements/FormParameter";
 import FormColor from "./Elements/FormColor";
+<<<<<<< HEAD
 import FormDirectory from "./Elements/FormDirectory";
+=======
+import FormNumber from "./Elements/FormNumber";
+>>>>>>> 829f9e464f (implement slider in vue)
 
 export default {
     components: {
         FormBoolean,
         FormHidden,
         FormInput,
+        FormNumber,
         FormColor,
         FormParameter,
         FormDirectory,