Add new image slider demo

doc/slider/FilterDoc.vue

@@ -0,0 +1,105 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Image filter implementation using multiple sliders.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <div class="flex flex-column align-items-center">
+            <img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
+            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-3" />
+            <Slider v-model="filterValues[filter]" class="w-14rem" :min="0" :max="200" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            filter: 0,
+            filterValues: [100, 100, 0],
+            filterOptions: [
+                { label: 'Contrast', value: 0 },
+                { label: 'Brightness', value: 1 },
+                { label: 'Sepia', value: 2 }
+            ],
+            code: {
+                basic: `
+<img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
+<SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-3" />
+<Slider v-model="filterValues[filter]" class="w-14rem" :min="0" :max="200" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <div class="flex flex-column align-items-center">
+            <img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
+            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-3" />
+            <Slider v-model="filterValues[filter]" class="w-14rem" :min="0" :max="200" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            filter: 0,
+            filterValues: [100, 100, 0],
+            filterOptions: [
+                { label: 'Contrast', value: 0 },
+                { label: 'Brightness', value: 1 },
+                { label: 'Sepia', value: 2 }
+            ]
+        }
+    },
+    computed: {
+        filterStyle() {
+            return {
+                filter: \`contrast(\${this.filterValues[0]}%) brightness(\${this.filterValues[1]}%) sepia(\${this.filterValues[2]}%)\`
+            };
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <div class="flex flex-column align-items-center">
+            <img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
+            <SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-3" />
+            <Slider v-model="filterValues[filter]" class="w-14rem" :min="0" :max="200" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const filter = ref(0);
+const filterValues = ref([100, 100, 0]);
+const filterOptions = ref([
+    { label: 'Contrast', value: 0 },
+    { label: 'Brightness', value: 1 },
+    { label: 'Sepia', value: 2 }
+]);
+const filterStyle = computed(() => {
+    return {
+        filter: \`contrast(\${this.filterValues[0]}%) brightness(\${this.filterValues[1]}%) sepia(\${this.filterValues[2]}%)\`
+    };
+})
+<\/script>
+`
+            }
+        };
+    },
+    computed: {
+        filterStyle() {
+            return {
+                filter: `contrast(${this.filterValues[0]}%) brightness(${this.filterValues[1]}%) sepia(${this.filterValues[2]}%)`
+            };
+        }
+    }
+};
+</script>

doc/slider/InputDoc.vue

@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <div class="w-14rem">
-            <InputText v-model.number="value" class="w-full" />
+            <InputText v-model.number="value" class="w-full mb-3" />
             <Slider v-model="value" class="w-full" />
         </div>
     </div>
@@ -25,7 +25,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <div class="w-14rem">
-            <InputText v-model.number="value" class="w-full" />
+            <InputText v-model.number="value" class="w-full mb-3" />
             <Slider v-model="value" class="w-full" />
         </div>
     </div>
@@ -45,7 +45,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <div class="w-14rem">
-            <InputText v-model.number="value" class="w-full" />
+            <InputText v-model.number="value" class="w-full mb-3" />
             <Slider v-model="value" class="w-full" />
         </div>
     </div>

pages/slider/index.vue

@@ -5,6 +5,7 @@
 <script>
 import AccessibilityDoc from '@/doc/slider/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/slider/BasicDoc.vue';
+import FilterDoc from '@/doc/slider/FilterDoc.vue';
 import ImportDoc from '@/doc/slider/ImportDoc.vue';
 import InputDoc from '@/doc/slider/InputDoc.vue';
 import RangeDoc from '@/doc/slider/RangeDoc.vue';
@@ -42,6 +43,11 @@ export default {
                     label: 'Range',
                     component: RangeDoc
                 },
+                {
+                    id: 'filter',
+                    label: 'Filter',
+                    component: FilterDoc
+                },
                 {
                     id: 'vertical',
                     label: 'Vertical',