diff --git a/contents/_includes/patterns/slider.njk b/contents/_includes/patterns/slider.njk
new file mode 100644
index 0000000..953f200
--- /dev/null
+++ b/contents/_includes/patterns/slider.njk
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 8755472..2b25926 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -95,6 +95,7 @@ eleventyExcludeFromCollections: true
{% pattern "Radio switch" %}{% include "patterns/radio-switch.njk" %}{% endpattern %}
{% pattern "Rating" %}{% include "patterns/rating.njk" %}{% endpattern %}
{% pattern "Search box" %}{% include "patterns/search-box.njk" %}{% endpattern %}
+ {% pattern "Slider" %}{% include "patterns/slider.njk" %}{% endpattern %}
diff --git a/contents/slider.md b/contents/slider.md
new file mode 100644
index 0000000..4a2fc53
--- /dev/null
+++ b/contents/slider.md
@@ -0,0 +1,65 @@
+---
+layout: layouts/post.njk
+title: Slider
+description: Create a slider with CSS flexbox
+keywords: css flexbox, css slider
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.slider {
+ /* Content is centered horizontally */
+ align-items: center;
+ display: flex;
+
+ /* Size */
+ height: 2rem;
+}
+
+.slider__left {
+ height: 2px;
+
+ /* Colors */
+ background-color: #d1d5db;
+}
+
+.slider__circle {
+ /* Size */
+ height: 2rem;
+ width: 2rem;
+
+ /* Rounded border */
+ border-radius: 9999px;
+
+ /* Colors */
+ background-color: #3b82f6;
+}
+
+.slider__right {
+ /* Take the remaining width */
+ flex: 1;
+ height: 2px;
+
+ /* Colors */
+ background-color: #d1d5db;
+}
+```
+
+{% demo %}{% include "patterns/slider.njk" %}{% enddemo %}
diff --git a/pages/slider/index.tsx b/pages/slider/index.tsx
deleted file mode 100644
index 9ad28be..0000000
--- a/pages/slider/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`}
- css={`
- .container {
- /* Content is centered horizontally */
- align-items: center;
- display: flex;
-
- /* Size */
- height: 32px;
- }
-
- .container__left {
- height: 2px;
-
- /* Colors */
- background-color: #d1d5db;
- }
-
- .container__circle {
- /* Size */
- height: 32px;
- width: 32px;
-
- /* Rounded border */
- border-radius: 9999px;
-
- /* Colors */
- background-color: #d1d5db;
- }
-
- .container__right {
- /* Take the remaining width */
- flex: 1;
- height: 2px;
-
- /* Colors */
- background-color: #d1d5db;
- }
- `}
- >
-
-
-
- );
-};
-
-export default Details;
diff --git a/patterns/slider/Cover.tsx b/patterns/slider/Cover.tsx
deleted file mode 100644
index 38e9c8d..0000000
--- a/patterns/slider/Cover.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from 'react';
-
-import Circle from '../../placeholders/Circle';
-import Frame from '../../placeholders/Frame';
-import Line from '../../placeholders/Line';
-
-const Cover: React.FC<{}> = () => {
- return (
-
-
-
- );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index fd97dd9..c4ab600 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -64,6 +64,7 @@
@import './patterns/ribbon';
@import './patterns/search-box';
@import './patterns/separator';
+@import './patterns/slider';
@import './patterns/stacked-cards';
@import './patterns/stamp-border';
@import './patterns/statistic';
diff --git a/styles/patterns/_slider.scss b/styles/patterns/_slider.scss
new file mode 100644
index 0000000..f10fdc4
--- /dev/null
+++ b/styles/patterns/_slider.scss
@@ -0,0 +1,39 @@
+.slider {
+ /* Content is centered horizontally */
+ align-items: center;
+ display: flex;
+
+ /* Size */
+ height: 2rem;
+
+ /* Demo */
+ width: 100%;
+}
+
+.slider__left {
+ height: 2px;
+
+ /* Colors */
+ background-color: #d1d5db;
+}
+
+.slider__circle {
+ /* Size */
+ height: 2rem;
+ width: 2rem;
+
+ /* Rounded border */
+ border-radius: 9999px;
+
+ /* Colors */
+ background-color: #3b82f6;
+}
+
+.slider__right {
+ /* Take the remaining width */
+ flex: 1;
+ height: 2px;
+
+ /* Colors */
+ background-color: #d1d5db;
+}
\ No newline at end of file