Merge pull request #5796 from Countly/feat-add-slider-option-to-content-step

Feat: add slider to content builder input

Author: kanwarujjaval

frontend/express/public/javascripts/countly/vue/components/content.js

@@ -405,6 +405,7 @@
                     dropdown: 'el-select',
                     input: 'el-input',
                     switch: 'el-switch',
+                    slider: 'el-slider',
                     'color-picker': 'cly-colorpicker',
                     'input-number': 'el-input-number',
                 };
@@ -424,6 +425,8 @@
                             v-bind="inputProps"
                             :value="localValue"
                             @input="updateValue"
+                            :min="inputProps && inputProps.min"
+                            :max="inputProps && inputProps.max"
                             class="cly-vue-content-builder__layout-step__component"
                             :style="[ position !== 'horizontal' ? {\'width\':  \'100%\'} : {\'width\': width + \'px\'}]"
                         >
@@ -591,4 +594,4 @@
             </div>
         `
     }));
-}(window.countlyVue = window.countlyVue || {}));
+}(window.countlyVue = window.countlyVue || {}));

frontend/express/public/stylesheets/vue/clyvue.scss

@@ -4267,6 +4267,18 @@
             .el-input-group__append {
                 padding: 0 8px !important;
             }
+
+            /* .el-slider__bar {
+                background-color: #0166D6;
+            }
+
+            .el-slider__button {
+                border-color: #0166D6;
+            } */
+
+            .el-slider__runway {
+                background-color: #E2E4E8;
+            }
         }
         &__header {
             font-family: Inter;
@@ -4549,4 +4561,4 @@
         cursor: pointer;
         border-radius: 8px;
     }
-}
+}