diff --git a/packages/ui/src/components/va-slider/VaSlider.stories.ts b/packages/ui/src/components/va-slider/VaSlider.stories.ts
index 2f6b2d0841..b50c496ae0 100644
--- a/packages/ui/src/components/va-slider/VaSlider.stories.ts
+++ b/packages/ui/src/components/va-slider/VaSlider.stories.ts
@@ -1,12 +1,27 @@
 import { defineComponent } from 'vue'
-import VaSlider from './VaSlider.demo.vue'
+import { VaSlider } from '../va-slider'
+import { VaButton } from '../va-button'
+import VaSliderDemo from './VaSlider.demo.vue'
 
 export default {
   title: 'VaSlider',
   component: VaSlider,
 }
 
-export const Default = defineComponent({
-  components: { VaSlider },
-  template: '<VaSlider/>',
+export const Old = defineComponent({
+  components: { VaSliderDemo },
+  // template: '<va-alert description="Message" />',
+  template: 'banana',
+  // template: '<va-slider-demo/>',
+})
+
+export const FlipValues = () => defineComponent({
+  components: { VaSlider, VaButton },
+  data: () => ({
+    value: [70, 30],
+  }),
+  template: `
+    <va-slider :modelValue="value" range/>
+    <va-button @click="value.reverse()">Flip values</va-button>
+  `,
 })