diff --git a/docs/content/component/range-slider/rangeslider-guideline-do.png b/docs/content/component/range-slider/rangeslider-guideline-do.png
new file mode 100644
index 000000000..df6c3721e
Binary files /dev/null and b/docs/content/component/range-slider/rangeslider-guideline-do.png differ
diff --git a/docs/content/component/range-slider/rangeslider-guideline-dont-label-bottom.png b/docs/content/component/range-slider/rangeslider-guideline-dont-label-bottom.png
new file mode 100644
index 000000000..6bb311938
Binary files /dev/null and b/docs/content/component/range-slider/rangeslider-guideline-dont-label-bottom.png differ
diff --git a/docs/content/component/range-slider/rangeslider-guideline-use-label.png b/docs/content/component/range-slider/rangeslider-guideline-use-label.png
index 6af099c40..d28317f2b 100644
Binary files a/docs/content/component/range-slider/rangeslider-guideline-use-label.png and b/docs/content/component/range-slider/rangeslider-guideline-use-label.png differ
diff --git a/docs/content/component/range-slider/usage.mdx b/docs/content/component/range-slider/usage.mdx
index 653953fc9..b42aad451 100644
--- a/docs/content/component/range-slider/usage.mdx
+++ b/docs/content/component/range-slider/usage.mdx
@@ -93,4 +93,46 @@ slug: /component/range-slider/usage
 
 ## 가이드라인
 
-Working In Progress
+### Do / Don't
+
+<br />
+
+<DoDontLayout>
+  <DoBox>
+    <DoImage>
+      ![rangeslider guideline](./rangeslider-guideline-use-label.png)
+    </DoImage>
+    <DoText>
+      Label과 함께 사용하여 유저가 Range Slider의 목적과 선택된 값을 명확히 알
+      수 있도록 합니다.
+    </DoText>
+  </DoBox>
+  <DontBox>
+    <DontImage>
+      ![rangeslider guideline](./rangeslider-guideline-dont-label-bottom.png)
+    </DontImage>
+    <DontText>
+      Handle의 위치에 따라 움직이는 Label을 사용할 경우, Handle 아래에 배치하지
+      않습니다. Range Slider 조작시 손가락에 가려져 선택된 값을 파악하기
+      어렵습니다.
+    </DontText>
+  </DontBox>
+</DoDontLayout>
+<br />
+<DoDontLayout>
+  <DoBox>
+    <DoImage>
+      ![rangeslider guideline](./rangeslider-guideline-do-2.png)
+    </DoImage>
+    <DoText>Marker는 간결하게 작성합니다.</DoText>
+  </DoBox>
+  <DontBox>
+    <DontImage>
+      ![rangeslider guideline](./rangeslider-guideline-dont-2.png)
+    </DontImage>
+    <DontText>
+      Marker가 길어지지 않도록 유의합니다. 유저가 Tick의 위치를 파악하기 어려울
+      수 있습니다.
+    </DontText>
+  </DontBox>
+</DoDontLayout>