feat: add info about Slider React component (#120)

* docs: add info about `Slider` React component

* remove direction

very new but not very useful

* correct usage example

docs/development/api-wrapper/properties/react-components.md

@@ -28,6 +28,7 @@ namespace ReactComponent {
     const PanelSkeleton: any;
     const PanelContent: any;
     const PanelHeader: any;
+    const Slider: any
 };
 ```
 
@@ -316,6 +317,33 @@ const ConfirmButton = () => {
 }
 ```
 
+### `Slider`
+
+Component to render sliders. It is used by Spotify for the volume/playing bars and on the settings page.
+
+#### Props
+
+See [`SliderProps`](/docs/development/api-wrapper/types/react-component/slider-props).
+
+#### Example
+
+```tsx
+const Slider = () => {
+    const [value, setValue] = useState(0);
+
+    return (
+        <Spicetify.ReactComponent.Slider
+            max={100}
+            step={1}
+            value={value}
+            onDragStart={() => {}}
+            onDragMove={setValue}
+            onDragEnd={(value) => {console.log(`final value is ${value}`)}}
+        ></Spicetify.ReactComponent.Slider>
+    );
+}
+```
+
 ### `PanelSkeleton`, `PanelContent`, `PanelHeader`
 
 Components to render Spotify-style panel. Used by Spotify on their right sidebar panels (e.g. BuddyFeed, Now Playing, etc).

docs/development/api-wrapper/types/react-component/slider-props.md

@@ -0,0 +1,44 @@
+---
+title: SliderProps
+description: Type definition for props of ReactComponent.PanelSkeleton.
+---
+
+The `SliderProps` object is used to render a slider.
+
+:::note
+
+This type is deducted from Spotify's internal usage. It may not be accurate and may change in the future.
+
+:::
+
+```ts
+type SliderProps = {
+    value: number;
+    max: number;
+    step: number;
+    labelText?: string;
+    isInteractive?: boolean;
+    forceActiveStyles?: boolean;
+    onDragStart: (value: number) => void;
+    onDragMove: (value: number) => void;
+    onDragEnd: (value: number) => void;
+    onStepForward?: (value: number) => void;
+    onStepBackward?: (value: number) => void;
+}
+```
+
+#### Properties
+
+| Property | Type | Description |
+| :--- | :--- | :--- |
+| value | `number` | The current value of the slider. |
+| max | `number` | The maximum value the slider can have. |
+| step | `number` | The increment/decrement value when the slider is moved. |
+| labelText | `string` | `undefined` | The label text displayed for the slider. |
+| isInteractive | `boolean` | `undefined` | Determines if the slider is interactive. |
+| forceActiveStyles | `boolean` | `undefined` | Forces the active styles regardless of interaction state. |
+| onDragStart | `(value: number) => void` | Callback function when dragging starts. |
+| onDragMove | `(value: number) => void` | Callback function when the slider is being dragged. |
+| onDragEnd | `(value: number) => void` | Callback function when dragging ends. |
+| onStepForward | `(value: number) => void` | `undefined` | Callback function when the slider steps forward. **Deprecated.** |
+| onStepBackward | `(value: number) => void` | `undefined` | Callback function when the slider steps backward. **Deprecated.** |

sidebars.js

@@ -225,6 +225,7 @@ const sidebars = {
                     'development/api-wrapper/types/react-component/panel-skeleton-props',
                     'development/api-wrapper/types/react-component/panel-content-props',
                     'development/api-wrapper/types/react-component/panel-header-props',
+                    'development/api-wrapper/types/react-component/slider-props',
                   ],
                 },
                 {