feat: new slider component

es-ds-components/components/es-slider.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import Slider from 'primevue/slider';
+
+const props = defineProps({
+    /*
+    modelValue: {
+        type: Number,
+        default: 0,
+    },
+    */
+    min: {
+        type: Number,
+        required: true,
+        default: 0,
+    },
+    max: {
+        type: Number,
+        required: true,
+        default: 0,
+    },
+    step: {
+        type: Number,
+        default: 1,
+    },
+    /**
+     * Function that modifies label value
+     */
+    labelFormatter: {
+        type: Function,
+        required: false,
+        default: (val) => val,
+    },
+});
+
+// allow use of v-model on this component
+const model = defineModel<number>();
+
+/*
+const { modelValue } = props;
+
+watch(model, (newVal) => {
+    if (newVal) {
+        modelValue.valueOf = newVal;
+    }
+});
+*/
+</script>
+
+<template>
+    <div class="mb-3">
+        <slider
+            v-model="model"
+            :pt="{
+                root: {
+                    class: 'slider-root',
+                },
+                range: {
+                    class: 'slider-range',
+                },
+                handle: {
+                    class: 'slider-handle',
+                },
+            }" />
+    </div>
+    <div class="d-flex flex-row justify-content-between w-100">
+        <span>{{ labelFormatter(min) }}</span>
+        <span>{{ labelFormatter(max) }}</span>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+:deep(.slider-root) {
+    background-color: variables.$gray-300;
+    border-radius: 15px;
+    height: 10px;
+}
+
+:deep(.slider-range) {
+    background: linear-gradient(90deg, #688aea, #162676);
+    border-radius: 15px;
+    height: 10px;
+}
+
+:deep(.slider-handle) {
+    background-color: variables.$white;
+    border: 9px solid variables.$blue-600;
+    border-radius: 50%;
+    box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);
+    cursor: pointer;
+    filter: drop-shadow(0 1px 6px rgba(34, 38, 51, 0.25));
+    height: 28px;
+    transform: translate(-32%, -32%);
+    width: 28px;
+
+    &:focus-visible {
+        outline: none;
+    }
+}
+</style>

es-ds-components/nuxt.config.ts

@@ -63,6 +63,7 @@ export default defineNuxtConfig({
                 'primevue/progressbar',
                 'primevue/radiobutton',
                 'primevue/rating',
+                'primevue/slider',
                 'primevue/tabpanel',
                 'primevue/tabview',
             ],

es-ds-docs/components/ds-molecules-list.vue

@@ -54,6 +54,9 @@
         <li>
             <ds-link to="/molecules/rating"> Rating </ds-link>
         </li>
+        <li>
+            <ds-link to="/molecules/slider"> Slider </ds-link>
+        </li>
         <li>
             <ds-link to="/molecules/support"> Support </ds-link>
         </li>

es-ds-docs/pages/molecules/slider.vue

@@ -0,0 +1,68 @@
+<script setup>
+const model = ref(null);
+// const modelValue = ref(25);
+const min = ref(0);
+const max = ref(1000);
+const step = ref(50);
+
+const { $prism } = useNuxtApp();
+const compCode = ref('');
+const docCode = ref('');
+
+if ($prism) {
+    /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */
+    const compSource = await import('@energysage/es-ds-components/components/es-slider.vue?raw');
+    const docSource = await import('./slider.vue?raw');
+    /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import */
+
+    compCode.value = $prism.normalizeCode(compSource.default);
+    docCode.value = $prism.normalizeCode(docSource.default);
+    $prism.highlight();
+}
+
+const propTableRows = [
+    ['min', 'Number', 'true', 'Minimum value of slider.'],
+    ['max', 'Number', 'true', 'Maximum value of slider.'],
+    ['step', 'Number', 'false', 'Step factor to increment/decrement the value.'],
+    ['labelFormatter', 'Function', 'false', 'Function that modifies label value.'],
+];
+</script>
+
+<template>
+    <div>
+        <h1>Slider</h1>
+
+        <p>
+            Extended from
+            <nuxt-link
+                href="https://v3.primevue.org/slider/"
+                target="_blank">
+                PrimeVue Slider
+            </nuxt-link>
+        </p>
+
+        <es-slider
+            v-model="model"
+            :min="min"
+            :max="max"
+            :step="step"
+            :label-formatter="(val) => `$${val}`" />
+
+        <!--
+            :model-value="modelValue"
+        -->
+
+        <div class="my-500"></div>
+
+        <div class="mb-500">
+            <h2>Slider props</h2>
+            <ds-prop-table :rows="propTableRows" />
+        </div>
+
+        <ds-doc-source
+            :comp-code="compCode"
+            comp-source="es-ds-components/components/es-slider.vue"
+            :doc-code="docCode"
+            doc-source="es-ds-docs/pages/molecules/slider.vue" />
+    </div>
+</template>