feat: add ability to disable the slider via the disabled prop, closes

#91, closes #51
nerdyman · Apr 7, 2023 · ea74395 · ea74395
1 parent 75dc75f
commit ea74395
Show file tree

Hide file tree

Showing 12 changed files with 277 additions and 170 deletions.
diff --git a/README.md b/README.md
@@ -83,6 +83,7 @@ See the [Images docs](https://react-compare-slider.vercel.app/?path=/docs/docs-i
 | ---- | ---- | :------: | ------- | ----------- |
 | [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/docs-bounds-padding--page)                   | `number`    |              | `0`           | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait).       |
 | [`changePositionOnHover`](https://react-compare-slider.vercel.app/?path=/story/docs-change-position-on-hover--page) | `boolean`   |              | `false`       | Whether the slider should follow the pointer on hover.                                                |
+| [`disabled`](https://react-compare-slider.vercel.app/?path=/story/docs-disabled--page)                   | `boolean`    |              | `false`           |  Whether to disable slider movement (items are still interactable).       |
 | [`handle`](https://react-compare-slider.vercel.app/?path=/story/docs-handles--page)                                 | `ReactNode` |              | `undefined`   | Custom handle component.                                                                              |
 | `itemOne`                                                                                                           | `ReactNode` |      ✓       | `undefined`   | First component to show in slider.                                                                    |
 | `itemTwo`                                                                                                           | `ReactNode` |      ✓       | `undefined`   | Second component to show in slider.                                                                   |

diff --git a/docs/storybook/content/05-only-handle-draggable.stories.mdx b/docs/storybook/content/05-only-handle-draggable.stories.mdx
@@ -32,16 +32,16 @@ const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;
 </Canvas>
 
 <Canvas>
-  <Story id="demos--detect-touch-devices" />
+  <Story id="recipies-detect-touch-devices--detect-touch-devices" />
 </Canvas>
 
 <Canvas>
-  <Story id="demos-google-maps--google-maps" />
+  <Story id="recipies-googlemaps--google-maps" />
 </Canvas>
 
 <ArgTypes of={ReactCompareSlider} />
 
 Also checkout the
-[Only Handle Draggable](/story/demos--only-handle-draggable) and
-[Detect Touch Devices](/story/demos--detect-touch-devices) and
-[Google Maps](/story/demos-google-maps--google-maps) demos.
+[Only Handle Draggable](/story/docs--only-handle-draggable) and
+[Detect Touch Devices](/story/recipies-detect-touch-devices--detect-touch-devices) and
+[Google Maps](/story/recipies-googlemaps--google-maps) demos.