V4 Improvements

.editorconfig

@@ -8,7 +8,7 @@ charset = utf-8
 end_of_line = lf
 indent_size = 2
 insert_final_newline = true
-max_line_length = 90
+max_line_length = 110
 trim_trailing_whitespace = true
 
 [*.{md,mdx}]

.eslintrc

@@ -33,7 +33,14 @@
     "react/jsx-indent": 0,
     "react/jsx-indent-props": 0,
     "react/prop-types": 0,
-    "@typescript-eslint/consistent-type-imports": "warn",
+    "react/react-in-jsx-scope": 0,
+    "@typescript-eslint/consistent-type-imports": [
+      "warn",
+      {
+        "prefer": "type-imports",
+        "fixStyle": "inline-type-imports"
+      }
+    ],
     "@typescript-eslint/explicit-function-return-type": "warn",
     "@typescript-eslint/no-non-null-assertion": "warn",
     "@typescript-eslint/no-shadow": "warn",

.github/workflows/publish-preview.yml

@@ -9,20 +9,18 @@ jobs:
 
     steps:
       - name: 🛒 Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
 
       - name: ⚒️ Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: 📦 Install Dependencies
-        run: |
-          corepack enable
-          pnpm install --frozen-lockfile --filter react-compare-slider
+        run: npm run bootstrap
 
       - name: 🔨 Build
         run: pnpm run --filter react-compare-slider build

.prettierrc.js

@@ -1,7 +1,7 @@
 /** @type {import('@ianvs/prettier-plugin-sort-imports').PrettierConfig} */
 module.exports = {
   plugins: [require.resolve('@ianvs/prettier-plugin-sort-imports')],
-  printWidth: 100,
+  printWidth: 110,
   semi: true,
   singleQuote: true,
   trailingComma: 'all',

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "editor.rulers": [100],
+  "editor.rulers": [110],
   "editor.formatOnSave": true,
   "search.exclude": {
     "**/node_modules": true,

README.md

@@ -11,12 +11,15 @@
 <a href="https://github.com/nerdyman/react-compare-slider/actions?query=workflow%3Abuild"><img alt="GitHub CI status" src="https://img.shields.io/github/actions/workflow/status/nerdyman/react-compare-slider/ci.yml" /></a>
 <a href="https://codeclimate.com/github/nerdyman/react-compare-slider/code?q=lib"><img src="https://img.shields.io/codeclimate/coverage/nerdyman/react-compare-slider" alt="Coverage" /></a>
 <a href="https://react-compare-slider.vercel.app"><img  alt="Demos" src="https://raw.githubusercontent.com/storybookjs/brand/8d28584c89959d7075c237e9345955c895048977/badge/badge-storybook.svg" /></a>
+<a href="https://pkg.pr.new/~/nerdyman/react-compare-slider">
+<img alt="Open in pkg.pr.new" src="https://pkg.pr.new/badge/nerdyman/react-compare-slider?style=flat&color=000&logoSize=auto">
+</a>
 
 </div>
 
-> [!IMPORTANT]  
+> [!IMPORTANT]
 > This readme is for the [v4 release](https://github.com/nerdyman/react-compare-slider/releases) which is currently in beta (`react-compare-slider@beta`).
-> 
+>
 > See [Version 3](https://github.com/nerdyman/react-compare-slider/tree/v3.1.0) for the latest stable release (`react-compare-slider`).
 
 ---
@@ -72,7 +75,7 @@ export const Example = () => {
 
 | Prop | Type | Required | Default | Description |
 | ---- | ---- | :------: | ------- | ----------- |
-| [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/demos--bounds-padding)                   | `number`                     |   | `0`           | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait).
+| [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/demos--bounds-padding)                   | `string`                     |   | `0%`           | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait).
 | [`browsingContext`](https://react-compare-slider.vercel.app/?path=/story/demos--browsing-context)               | `globalThis`                 |   | `globalThis`  | Context to bind events to (useful for iframes).
 | [`clip`](https://react-compare-slider.vercel.app/?path=/docs/docs-clip--docs)           | `` both\|itemOne\|itemTwo ``   |   | `both`          | Whether to clip `itemOne`, `itemTwo` or `both` items.
 | [`changePositionOnHover`](https://react-compare-slider.vercel.app/?path=/story/demos--change-position-on-hover) | `boolean`                    |   | `false`       | Whether the slider should follow the pointer on hover.

docs/storybook/content/02-bounds-padding.stories.mdx

@@ -7,8 +7,8 @@ import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slide
 # Using `boundsPadding`
 
 The `boundsPadding` prop allows you to limit the slideable area on the Y-axis
-in `portrait` mode or on the X-axis in the default landscape mode. Negative values are treated the
-same as `0` and the value **MUST** be supplied as a number in pixels.
+in `portrait` mode or on the X-axis in the default landscape mode. Both absolute
+and relative values are supported. E.g. `5%`, `10px`, `20rem`.
 
 Bounds padding is useful when the slider has other components overlaying it. E.g. in a full
 width or height carousel with overlaying navigation buttons.
@@ -18,7 +18,7 @@ within range of pixels of the left or right of the slider specified by the `boun
 The bounds are automatically applied to the top/bottom or right/left depending on the orientation of the slider.
 
 ```JSX
-boundsPadding={80}
+boundsPadding="5%"
 ```
 
 <Canvas>

docs/storybook/content/stories/00-demos/00-index.stories.tsx

@@ -1,11 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';
 import type { ReactCompareSliderDetailedProps } from 'react-compare-slider';
-import {
-  ReactCompareSlider,
-  ReactCompareSliderImage,
-  useReactCompareSliderRef,
-} from 'react-compare-slider';
+import { ReactCompareSlider, ReactCompareSliderImage, useReactCompareSliderRef } from 'react-compare-slider';
 import { createPortal } from 'react-dom';
 
 import { SLIDER_ROOT_TEST_ID } from '../99-tests/test-utils.test';
@@ -55,7 +51,7 @@ Images.args = {
 };
 
 export const BoundsPadding: StoryFn<ReactCompareSliderDetailedProps> = ({
-  boundsPadding = 80,
+  boundsPadding = '5%',
   ...props
 }) => {
   return (
@@ -81,7 +77,7 @@ export const BoundsPadding: StoryFn<ReactCompareSliderDetailedProps> = ({
   );
 };
 
-BoundsPadding.args = { boundsPadding: 80 };
+BoundsPadding.args = { boundsPadding: '5%' };
 
 export const BrowsingContext: StoryFn<ReactCompareSliderDetailedProps> = (props) => {
   const [browsingContext, setBrowsingContext] = useState<Window | null>(null);
@@ -236,8 +232,7 @@ export const KeyboardIncrement: StoryFn<ReactCompareSliderDetailedProps> = (prop
   return (
     <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
       <div className="sb-custom-note">
-        <em>Info:</em> Click the slider handle then use the keyboard arrows to change the slider
-        position.
+        <em>Info:</em> Click the slider handle then use the keyboard arrows to change the slider position.
       </div>
 
       <ReactCompareSlider
@@ -299,8 +294,8 @@ export const OnPositionChange: StoryFn<ReactCompareSliderDetailedProps> = (props
   return (
     <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, padding: 16 }}>
       <div className="sb-custom-note">
-        <em>Note:</em> This demo will be slightly laggy when viewing the action logging output in
-        Storybook Actions tab.
+        <em>Note:</em> This demo will be slightly laggy when viewing the action logging output in Storybook
+        Actions tab.
       </div>
 
       <ReactCompareSlider
@@ -326,10 +321,7 @@ export const OnPositionChange: StoryFn<ReactCompareSliderDetailedProps> = (props
 
 OnPositionChange.args = {};
 
-export const Portrait: StoryFn<ReactCompareSliderDetailedProps> = ({
-  portrait = true,
-  ...props
-}) => (
+export const Portrait: StoryFn<ReactCompareSliderDetailedProps> = ({ portrait = true, ...props }) => (
   <ReactCompareSlider
     portrait={portrait}
     {...props}
@@ -537,6 +529,7 @@ export const UseReactCompareSliderRef: StoryFn<ReactCompareSliderDetailedProps>
             left: '50%',
             fontSize: '1.5rem',
             transform: 'translateX(-50%)',
+            zIndex: 1,
           }}
         >
           Reset sliders to <code>position</code> value ({props.position})
@@ -547,3 +540,68 @@ export const UseReactCompareSliderRef: StoryFn<ReactCompareSliderDetailedProps>
 };
 
 UseReactCompareSliderRef.args = {};
+
+export const MultipleSliders: StoryFn<ReactCompareSliderDetailedProps> = (props) => (
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      padding: '1rem',
+      overflowY: 'auto',
+      height: 'calc(100dvh - 2rem)',
+    }}
+  >
+    <div style={{ display: 'flex', gap: '1rem', flexShrink: 0, height: 'calc(75dvh - 2rem)' }}>
+      <ReactCompareSlider
+        {...props}
+        itemOne={
+          <ReactCompareSliderImage
+            src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/lady-1.png"
+            alt="Image one"
+          />
+        }
+        itemTwo={
+          <ReactCompareSliderImage
+            src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/lady-2.png"
+            alt="Image two"
+          />
+        }
+      />
+      <ReactCompareSlider
+        {...props}
+        itemOne={
+          <ReactCompareSliderImage
+            src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/lady-1.png"
+            alt="Image one"
+          />
+        }
+        itemTwo={
+          <ReactCompareSliderImage
+            src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/lady-2.png"
+            alt="Image two"
+          />
+        }
+      />
+    </div>
+    <ReactCompareSlider
+      {...props}
+      style={{ flexShrink: 0, height: 'calc(75dvh - 2rem)' }}
+      portrait
+      itemOne={
+        <ReactCompareSliderImage
+          src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/lady-1.png"
+          alt="Image one"
+        />
+      }
+      itemTwo={
+        <ReactCompareSliderImage
+          src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/lady-2.png"
+          alt="Image two"
+        />
+      }
+    />
+  </div>
+);
+
+MultipleSliders.args = {};

docs/storybook/content/stories/02-handles/00-react-compare-slider-handle.stories.tsx

@@ -169,20 +169,19 @@ export const OverrideHandleContainerClick: StoryFn<ReactCompareSliderProps> = (p
       <div style={{ padding: '1rem' }}>
         <button>Click me, then click the slider handle</button>
         <p>
-          The <code>useReactCompareSliderRef</code> hook exposes the <code>handleContainer</code>{' '}
-          property which points to the <code>button</code> element that contains the{' '}
-          <code>handle</code>. By default, when the <code>handleContainer</code> or any elements
-          within it are clicked, it focuses the <code>handleContainer</code> and moves the slider
-          into view. This is for accessibility but you can override the behaviour as needed. In this
-          example, instead of plainly focusing the slider, it focuses and smooth scrolls it into
-          view.
+          The <code>useReactCompareSliderRef</code> hook exposes the <code>handleContainer</code> property
+          which points to the <code>button</code> element that contains the <code>handle</code>. By default,
+          when the <code>handleContainer</code> or any elements within it are clicked, it focuses the{' '}
+          <code>handleContainer</code> and moves the slider into view. This is for accessibility but you can
+          override the behaviour as needed. In this example, instead of plainly focusing the slider, it
+          focuses and smooth scrolls it into view.
         </p>
 
         <p>
           Note that this only occurs when the&nbsp;
-          <code>handleContainer</code> or elements within the <code>handleContainer</code> are
-          clicked. This is to allow custom <code>itemOne|itemTwo</code> components to be interacted
-          with without the slider stealing focus.
+          <code>handleContainer</code> or elements within the <code>handleContainer</code> are clicked. This
+          is to allow custom <code>itemOne|itemTwo</code> components to be interacted with without the slider
+          stealing focus.
         </p>
       </div>
       <ReactCompareSlider