diff --git a/client/components/forms/SliderInput.vue b/client/components/forms/SliderInput.vue
new file mode 100644
index 0000000..b43cb62
--- /dev/null
+++ b/client/components/forms/SliderInput.vue
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue
index 7377a97..e0a28ea 100644
--- a/client/components/open/forms/OpenFormField.vue
+++ b/client/components/open/forms/OpenFormField.vue
@@ -141,6 +141,9 @@ export default {
if (field.type === 'number' && field.is_scale && field.scale_max_value) {
return 'ScaleInput'
}
+ if (field.type === 'number' && field.is_slider && field.slider_max_value) {
+ return 'SliderInput'
+ }
if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
return 'FlatSelectInput'
}
@@ -308,6 +311,10 @@ export default {
inputProperties.minScale = parseInt(field.scale_min_value) ?? 1
inputProperties.maxScale = parseInt(field.scale_max_value) ?? 5
inputProperties.stepScale = parseInt(field.scale_step_value) ?? 1
+ } else if (field.type === 'number' && field.is_slider) {
+ inputProperties.minSlider = parseInt(field.slider_min_value) ?? 0
+ inputProperties.maxSlider = parseInt(field.slider_max_value) ?? 50
+ inputProperties.stepSlider = parseInt(field.slider_step_value) ?? 5
} else if (field.type === 'number' || (field.type === 'phone_number' && field.use_simple_text_input)) {
inputProperties.pattern = '/\d*'
} else if (field.type === 'phone_number' && !field.use_simple_text_input) {
diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue
index 932a235..0246666 100644
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -100,7 +100,30 @@
/>
+
+
+
+ Slider
+
+
+ Transform this field into a slider input.
+
+
+
+
+
@@ -535,6 +558,7 @@ export default {
initRating () {
if (this.field.is_rating) {
this.field.is_scale = false
+ this.field.is_slider = false
if (!this.field.rating_max_value) {
this.field.rating_max_value = 5
}
@@ -543,6 +567,7 @@ export default {
initScale () {
if (this.field.is_scale) {
this.field.is_rating = false
+ this.field.is_slider = false
if (!this.field.scale_min_value) {
this.field.scale_min_value = 1
}
@@ -554,6 +579,22 @@ export default {
}
}
},
+
+ initSlider () {
+ if (this.field.is_slider) {
+ this.field.is_rating = false
+ this.field.is_scale = false
+ if (!this.field.slider_min_value) {
+ this.field.slider_min_value = 0
+ }
+ if (!this.field.slider_max_value) {
+ this.field.slider_max_value = 50
+ }
+ if (!this.field.slider_step_value) {
+ this.field.slider_step_value = 1
+ }
+ }
+ },
onFieldOptionsChange (val) {
const vals = (val) ? val.trim().split('\n') : []
const tmpOpts = vals.map(name => {
diff --git a/client/lib/forms/form-themes.js b/client/lib/forms/form-themes.js
index 56c761e..ae23f36 100644
--- a/client/lib/forms/form-themes.js
+++ b/client/lib/forms/form-themes.js
@@ -32,6 +32,11 @@ export const themes = {
unselectedButton: 'bg-white hover:bg-gray-50 border',
help: 'text-gray-400 dark:text-gray-500'
},
+ SliderInput: {
+ label: 'text-gray-700 dark:text-gray-300 font-semibold',
+ stepLabel: 'text-gray-700 dark:text-gray-300 text-center text-xs',
+ help: 'text-gray-400 dark:text-gray-500'
+ },
fileInput: {
input: 'min-h-40 border border-dashed border-gray-300 p-4 rounded-lg',
inputHover: {
@@ -71,6 +76,11 @@ export const themes = {
unselectedButton: 'bg-white hover:bg-gray-50 border -mx-4',
help: 'text-gray-400 dark:text-gray-500'
},
+ SliderInput: {
+ label: 'text-gray-700 dark:text-gray-300 font-semibold',
+ stepLabel: 'text-gray-700 dark:text-gray-300 text-center text-xs',
+ help: 'text-gray-400 dark:text-gray-500'
+ },
fileInput: {
input: 'min-h-40 border border-dashed border-gray-300 p-4',
inputHover: {
@@ -110,6 +120,11 @@ export const themes = {
unselectedButton: 'bg-notion-input-background dark:bg-notion-dark-light hover:bg-gray-50 border',
help: 'text-notion-input-help dark:text-gray-500'
},
+ SliderInput: {
+ label: 'text-gray-700 dark:text-gray-300 font-semibold',
+ stepLabel: 'text-gray-700 dark:text-gray-300 text-center text-xs',
+ help: 'text-gray-400 dark:text-gray-500'
+ },
fileInput: {
input: 'min-h-40 border border-dashed border-gray-300 p-4 rounded bg-notion-input-background',
inputHover: {