Skip to content

Commit 421ea7c

Browse files
committed
Minor
1 parent 9ce75c3 commit 421ea7c

File tree

2 files changed

+80
-1
lines changed

2 files changed

+80
-1
lines changed

examples/example_pro/src/FirestoreApp/views/TestEditorView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,6 @@ code blocks
8686
8787
This editor is in development and your **feedback** is very **valuable**. The content of this editor is only stored locally in this demo.
8888
89-
- [x] Star us on [GitH](https://github.com/steven-tey/novel)[ub](https://github.com/firecmsco/firecms)
89+
- [x] Star us on [GitHub](https://github.com/firecmsco/firecms)
9090
9191
- [x] Leave us your comments on [Discord](https://discord.gg/fxy7xsQm3m)`

website/docs/components/slider.mdx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
id: slider
3+
title: Slider
4+
sidebar_label: Slider
5+
---
6+
7+
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.
8+
9+
## Usage
10+
11+
To use the `Slider`, import it from your components library and configure it using props such as `min`, `max`, `step`, `value`, and others.
12+
13+
14+
15+
import CodeSample from "../../src/CodeSample";
16+
import CodeBlock from "@theme/CodeBlock";
17+
import SliderBasicDemo from "../../samples/components/slider/slider_basic";
18+
import SliderBasicSource from "!!raw-loader!../../samples/components/slider/slider_basic";
19+
import SliderRangeDemo from "../../samples/components/slider/slider_range";
20+
import SliderRangeSource from "!!raw-loader!../../samples/components/slider/slider_range";
21+
import SliderSmallDemo from "../../samples/components/slider/slider_small";
22+
import SliderSmallSource from "!!raw-loader!../../samples/components/slider/slider_small";
23+
import SliderDisabledDemo from "../../samples/components/slider/slider_disabled";
24+
import SliderDisabledSource from "!!raw-loader!../../samples/components/slider/slider_disabled";
25+
import SliderInvertedDemo from "../../samples/components/slider/slider_inverted";
26+
import SliderInvertedSource from "!!raw-loader!../../samples/components/slider/slider_inverted";
27+
28+
## Basic Slider
29+
30+
A basic example of the Slider component with default settings.
31+
32+
33+
<CodeSample>
34+
<SliderBasicDemo/>
35+
</CodeSample>
36+
37+
<CodeBlock language="tsx">{SliderBasicSource}</CodeBlock>
38+
39+
## Range Slider
40+
41+
An example of a range slider with two handles that allow users to select a range of values.
42+
43+
<CodeSample>
44+
<SliderRangeDemo/>
45+
</CodeSample>
46+
47+
<CodeBlock language="tsx">{SliderRangeSource}</CodeBlock>
48+
49+
## Small Slider
50+
51+
A smaller version of the Slider component with a reduced size.
52+
53+
<CodeSample>
54+
<SliderSmallDemo/>
55+
</CodeSample>
56+
57+
<CodeBlock language="tsx">{SliderSmallSource}</CodeBlock>
58+
59+
60+
## Disabled Slider
61+
62+
Illustrating how to use the `disabled` prop to create a non-interactive Slider.
63+
64+
65+
<CodeSample>
66+
<SliderDisabledDemo/>
67+
</CodeSample>
68+
69+
<CodeBlock language="tsx">{SliderDisabledSource}</CodeBlock>
70+
71+
## Inverted Slider
72+
73+
An example of an inverted slider where the value decreases from left to right.
74+
75+
<CodeSample>
76+
<SliderInvertedDemo/>
77+
</CodeSample>
78+
79+
<CodeBlock language="tsx">{SliderInvertedSource}</CodeBlock>

0 commit comments

Comments
 (0)