slide survey added and working

frontend/src/components/form.vue

                         v-model='answers[makeKebob(prompt.question)]')
                     label(:for='response') {{ response }}
             //- TODO: Slider from -3 to 0 to +3 (increments of 1)
-            .response-wrapper(v-if='prompt.type === "slider"')
+            .response-wrapper(v-else-if='prompt.type === "slide"')
                 label {{ prompt.type }}
                 input(
                     type='range'
                     min='-3'
                     max='3'
                     v-model='answers[makeKebob(prompt.question)]')
+                span {{ answers[makeKebob(prompt.question)] }}
 
     footer.f-row.w-full
         button.p-1(:disabled='state.step == 1' @click='back') back
 <script setup>
 import Joi from 'joi'
 import { validatorMapping, makeKebob } from '@/utils'
-import { defineProps, reactive } from 'vue'
+import { defineProps, reactive, ref } from 'vue'
+
+const slidevalue = ref('')
 
 const props = defineProps({
     form: {

frontend/src/services/survey.service.js

         [
             {
                 id: 4,
-                type: 'slider',
-                question: 'whats your favorite number',
+                type: 'slide',
+                question: 'choose a num',
                 responses: null,
             },
         ],
+        [
+            {
+                id: 5,
+                type: 'checklist',
+                question: 'pick a status',
+                responses: ['cry', 'sad', 'mad', 'numb'],
+            },
+        ],
     ]
     const mysurvey = new Survey(myquestions)
     return mysurvey

frontend/src/utils/index.js

 const validatorMapping = {
     'input-string': Joi.string(),
     'tag-cloud': Joi.string(),
+    'checklist': Joi.string(),
+    'slide': Joi.string(),
 }
 
 const makeKebob = input => {

frontend/src/views/Survey.vue

             > h3
                 text-transform: capitalize
                 padding: 1vh 0
+            > div > span
+                display: block
+                text-align: center
 </style>