[@mantine/core] RangeSlider: Add maxRange prop support (#2998)

* [docs] Fix typo (#2997)

* MaxRange Property

Co-authored-by: Derek <derrreks@gmail.com>

.gitignore

@@ -5,6 +5,7 @@
 .idea/
 .vscode/
 .nova/
+.gitpod.yml
 
 # node
 node_modules/

src/mantine-core/src/Slider/RangeSlider/RangeSlider.tsx

@@ -45,6 +45,9 @@ export interface RangeSliderProps
   /** Minimal range interval */
   minRange?: number;
 
+  /** Maximum range interval */
+  maxRange?: number;
+
   /** Number by which value will be incremented/decremented with thumb drag and arrows */
   step?: number;
 
@@ -141,6 +144,7 @@ export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>((props,
     min,
     max,
     minRange,
+    maxRange,
     step,
     precision,
     defaultValue,
@@ -206,6 +210,10 @@ export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>((props,
       if (val > (max - (minRange - 0.000000001) || min)) {
         clone[index] = valueRef.current[index];
       }
+
+      if (clone[1] - val > maxRange) {
+        clone[1] = val + maxRange;
+      }
     }
 
     if (index === 1) {
@@ -216,6 +224,10 @@ export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>((props,
       if (val < clone[0] + minRange) {
         clone[index] = valueRef.current[index];
       }
+
+      if (val - clone[0] > maxRange) {
+        clone[0] = val - maxRange;
+      }
     }
 
     _setValue(clone);

src/mantine-core/src/Slider/Slider.story.tsx

@@ -73,3 +73,18 @@ export function MinRangeWithNegativeValues() {
     </div>
   );
 }
+
+export function MinMaxSliderDistance() {
+  return (
+    <div style={{ maxWidth: 400, padding: 40 }}>
+      <RangeSlider
+        min={0}
+        max={100}
+        minRange={5}
+        maxRange={20}
+        step={0.5}
+        defaultValue={[0, 100]}
+      />
+    </div>
+  );
+}