[DualThumb] Add an offset to push the minimum range value to the left

[mathildebuenerd]

WHY are these changes introduced?

Fixes #4155

When using the Dual thumb range slider with a min value different from 0, there is an extra padding on the left. This prevents selecting a value when having a range [10, 50] for example:

What's happening	What's expected

WHAT is this pull request doing?

Substract the minimum range value position to the position.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {Page} from '../src';
import {DualThumb} from '../src/components/RangeSlider/components/DualThumb';

export function Playground() {
  const handleChange = (value) => value;
  return (
    <Page title="Playground">
      <DualThumb
        id="test"
        label="Range=[0,50] - Value=[10,50]"
        min={0}
        max={50}
        value={[10, 50]}
        step={1}
        onChange={handleChange}
      />
      <DualThumb
        id="test"
        label="Range=[10,50] - Value=[10,50]"
        min={10}
        max={50}
        value={[10, 50]}
        step={1}
        onChange={handleChange}
      />
      <DualThumb
        id="test"
        label="Range=[10,50] - Value=[20,40]"
        min={10}
        max={50}
        value={[20, 40]}
        step={1}
        onChange={handleChange}
      />
     <DualThumb
        id="test"
        label="Range=[-10,30] - Value=[-10,-9]"
        min={-10}
        max={30}
        value={[-10, -9]}
        step={1}
        onChange={handleChange}
      />
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟢 This pull request modifies 1 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

• /src/components/RangeSlider/RangeSlider.tsx

🧩 src/components/RangeSlider/components/DualThumb/DualThumb.tsx (total: 1)

Files potentially affected (total: 1)

• /src/components/RangeSlider/RangeSlider.tsx

[mathildebuenerd]

Not sure if I should add an entry to the changelog?

[LauraAubin]

Tophat is working as expected!

I think you want to add a changelog entry under bug fixes

[github-actions]

size-limit report

Path	Size
cjs	141.58 KB (+0.02% 🔺)
esm	95.4 KB (+0.03% 🔺)
esnext	138.4 KB (+0.02% 🔺)
css	33.6 KB (0%)

[mathildebuenerd]

@LauraAubin cool thank you, I added it to unreleased.md

[tmlayton]

Code looks good—would love to see a test added for this!

[mathildebuenerd]

@tmlayton good point! here it is: https://github.com/Shopify/polaris-react/pull/4172/files#diff-fb6dd9f5964ac9e139777a5b04ccfc26a3a9572afc221dc55a04ea840d2906aeR300-R333

[ghost]

🎉 Thanks for your contribution to Polaris React!