From 421ea7c639f7ff935fc182e065b8baf514cdf351 Mon Sep 17 00:00:00 2001
From: francesco <francesco@camberi.com>
Date: Fri, 18 Oct 2024 19:21:51 +0200
Subject: [PATCH] Minor

---
 .../src/FirestoreApp/views/TestEditorView.tsx |  2 +-
 website/docs/components/slider.mdx            | 79 +++++++++++++++++++
 2 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 website/docs/components/slider.mdx

diff --git a/examples/example_pro/src/FirestoreApp/views/TestEditorView.tsx b/examples/example_pro/src/FirestoreApp/views/TestEditorView.tsx
index 6af3d958b..aefa02b39 100644
--- a/examples/example_pro/src/FirestoreApp/views/TestEditorView.tsx
+++ b/examples/example_pro/src/FirestoreApp/views/TestEditorView.tsx
@@ -86,6 +86,6 @@ code blocks
 
 This editor is in development and your **feedback** is very **valuable**. The content of this editor is only stored locally in this demo.
 
-- [x] Star us on [GitH](https://github.com/steven-tey/novel)[ub](https://github.com/firecmsco/firecms)
+- [x] Star us on [GitHub](https://github.com/firecmsco/firecms)
 
 - [x] Leave us your comments on [Discord](https://discord.gg/fxy7xsQm3m)`
diff --git a/website/docs/components/slider.mdx b/website/docs/components/slider.mdx
new file mode 100644
index 000000000..48f6d5ae5
--- /dev/null
+++ b/website/docs/components/slider.mdx
@@ -0,0 +1,79 @@
+---
+id: slider
+title: Slider
+sidebar_label: Slider
+---
+
+Sliders allow users to input a value by sliding a handle along a track. This component is highly customizable with various options for orientation, step, range, and more.
+
+## Usage
+
+To use the `Slider`, import it from your components library and configure it using props such as `min`, `max`, `step`, `value`, and others.
+
+
+
+import CodeSample from "../../src/CodeSample";
+import CodeBlock from "@theme/CodeBlock";
+import SliderBasicDemo from "../../samples/components/slider/slider_basic";
+import SliderBasicSource from "!!raw-loader!../../samples/components/slider/slider_basic";
+import SliderRangeDemo from "../../samples/components/slider/slider_range";
+import SliderRangeSource from "!!raw-loader!../../samples/components/slider/slider_range";
+import SliderSmallDemo from "../../samples/components/slider/slider_small";
+import SliderSmallSource from "!!raw-loader!../../samples/components/slider/slider_small";
+import SliderDisabledDemo from "../../samples/components/slider/slider_disabled";
+import SliderDisabledSource from "!!raw-loader!../../samples/components/slider/slider_disabled";
+import SliderInvertedDemo from "../../samples/components/slider/slider_inverted";
+import SliderInvertedSource from "!!raw-loader!../../samples/components/slider/slider_inverted";
+
+## Basic Slider
+
+A basic example of the Slider component with default settings.
+
+
+<CodeSample>
+    <SliderBasicDemo/>
+</CodeSample>
+
+<CodeBlock language="tsx">{SliderBasicSource}</CodeBlock>
+
+## Range Slider
+
+An example of a range slider with two handles that allow users to select a range of values.
+
+<CodeSample>
+    <SliderRangeDemo/>
+</CodeSample>
+
+<CodeBlock language="tsx">{SliderRangeSource}</CodeBlock>
+
+## Small Slider
+
+A smaller version of the Slider component with a reduced size.
+
+<CodeSample>
+    <SliderSmallDemo/>
+</CodeSample>
+
+<CodeBlock language="tsx">{SliderSmallSource}</CodeBlock>
+
+
+## Disabled Slider
+
+Illustrating how to use the `disabled` prop to create a non-interactive Slider.
+
+
+<CodeSample>
+    <SliderDisabledDemo/>
+</CodeSample>
+
+<CodeBlock language="tsx">{SliderDisabledSource}</CodeBlock>
+
+## Inverted Slider
+
+An example of an inverted slider where the value decreases from left to right.
+
+<CodeSample>
+    <SliderInvertedDemo/>
+</CodeSample>
+
+<CodeBlock language="tsx">{SliderInvertedSource}</CodeBlock>