diff --git a/packages/core/src/components/list-slider/stories/list-slider.core.stories.tsx b/packages/core/src/components/list-slider/stories/list-slider.core.stories.tsx
new file mode 100644
index 000000000..e185e1887
--- /dev/null
+++ b/packages/core/src/components/list-slider/stories/list-slider.core.stories.tsx
@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit'
+
+import './list-slider.css'
+
+import { ListSliderStoryArgs } from './list-slider.args'
+
+export default {
+ title: 'Components/List Slider',
+ ...ListSliderStoryArgs,
+} as Meta
+
+const createListSlider = () => {
+ return html`
+
+
+ Example 1
+
+
+ Example 2
+
+
+ Example 3
+
+
+ Example 4
+
+
+ Example 5
+
+
+ `
+}
+
+export const Default: StoryObj = {
+ render: () => createListSlider(),
+}
diff --git a/packages/core/src/components/list-slider/stories/list-slider.css b/packages/core/src/components/list-slider/stories/list-slider.css
new file mode 100644
index 000000000..5d2b5302f
--- /dev/null
+++ b/packages/core/src/components/list-slider/stories/list-slider.css
@@ -0,0 +1,29 @@
+.slide {
+ align-items: center;
+ background-color: var(--color-brand-primary-regular);
+ color: var(--color-neutral-white);
+ display: flex;
+ height: 300px;
+ justify-content: center;
+ min-width: 300px;
+}
+
+.slide:nth-child(1) {
+ background-color: var(--color-brand-primary-regular);
+}
+
+.slide:nth-child(2) {
+ background-color: var(--color-brand-secondary-regular);
+}
+
+.slide:nth-child(3) {
+ background-color: var(--color-contextual-success-regular);
+}
+
+.slide:nth-child(4) {
+ background-color: tomato;
+}
+
+.slide:nth-child(5) {
+ background-color: var(--color-contextual-warning-regular);
+}
diff --git a/packages/core/src/components/list-slider/stories/list-slider.react.stories.tsx b/packages/core/src/components/list-slider/stories/list-slider.react.stories.tsx
new file mode 100644
index 000000000..75ca364c9
--- /dev/null
+++ b/packages/core/src/components/list-slider/stories/list-slider.react.stories.tsx
@@ -0,0 +1,40 @@
+import {
+ AtomListSlider,
+ AtomListSliderItem,
+} from '@juntossomosmais/atomium/react'
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import './list-slider.css'
+
+import { ListSliderStoryArgs } from './list-slider.args'
+
+export default {
+ title: 'Components/List Slider',
+ components: [AtomListSlider, AtomListSliderItem],
+ ...ListSliderStoryArgs,
+} as Meta
+
+const createListSlider = () => (
+
+
+ Example 1
+
+
+ Example 2
+
+
+ Example 3
+
+
+ Example 4
+
+
+ Example 5
+
+
+)
+
+export const Default: StoryObj = {
+ render: () => createListSlider(),
+}
diff --git a/packages/core/src/components/list-slider/stories/list-slider.vue.stories.tsx b/packages/core/src/components/list-slider/stories/list-slider.vue.stories.tsx
new file mode 100644
index 000000000..7898c17aa
--- /dev/null
+++ b/packages/core/src/components/list-slider/stories/list-slider.vue.stories.tsx
@@ -0,0 +1,54 @@
+import {
+ AtomListSlider,
+ AtomListSliderItem,
+} from '@juntossomosmais/atomium/vue'
+import { Meta, StoryObj } from '@storybook/vue3'
+
+import './list-slider.css'
+
+import { ListSliderStoryArgs } from './list-slider.args'
+
+export default {
+ title: 'Components/List Slider',
+ ...ListSliderStoryArgs,
+} as Meta
+
+const createListSlider = () => ({
+ components: { AtomListSlider, AtomListSliderItem },
+ setup() {
+ return {}
+ },
+ template: `
+
+
+
+ Example 1
+
+
+
+
+ Example 2
+
+
+
+
+ Example 3
+
+
+
+
+ Example 4
+
+
+
+
+ Example 5
+
+
+
+ `,
+})
+
+export const Default: StoryObj = {
+ render: () => createListSlider(),
+}