From 14f4d2e3588f8e3ffd6880970a6294a2d40e171e Mon Sep 17 00:00:00 2001
From: David Catuhe <david.catuhe@live.fr>
Date: Tue, 29 Oct 2024 13:36:27 -0700
Subject: [PATCH] Allow sliders to go overflow (#15750)

---
 .../inspector/src/components/actionTabs/actionTabs.scss    | 5 +++++
 .../sharedUiComponents/src/lines/sliderLineComponent.tsx   | 7 ++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/dev/inspector/src/components/actionTabs/actionTabs.scss b/packages/dev/inspector/src/components/actionTabs/actionTabs.scss
index cc2bc4188ca..4864f23a532 100644
--- a/packages/dev/inspector/src/components/actionTabs/actionTabs.scss
+++ b/packages/dev/inspector/src/components/actionTabs/actionTabs.scss
@@ -216,6 +216,7 @@ $line-padding-left: 2px;
                         opacity: 0.7;
                         transition: opacity 0.2s;
                     }
+
                     .range::-webkit-slider-thumb {
                         -webkit-appearance: none;
                         appearance: none;
@@ -1081,6 +1082,10 @@ $line-padding-left: 2px;
                             outline: none;
                             opacity: 0.7;
                             transition: opacity 0.2s;
+
+                            &.overflow {
+                                background-color: red;
+                            }
                         }
 
                         .range:hover {
diff --git a/packages/dev/sharedUiComponents/src/lines/sliderLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/sliderLineComponent.tsx
index 5e6ba02f31a..c6a9ea11d83 100644
--- a/packages/dev/sharedUiComponents/src/lines/sliderLineComponent.tsx
+++ b/packages/dev/sharedUiComponents/src/lines/sliderLineComponent.tsx
@@ -25,6 +25,7 @@ interface ISliderLineComponentProps {
     iconLabel?: string;
     lockObject: LockObject;
     unit?: React.ReactNode;
+    allowOverflow?: boolean;
 }
 
 export class SliderLineComponent extends React.Component<ISliderLineComponentProps, { value: number }> {
@@ -154,8 +155,8 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
                     target={this.state}
                     digits={this.props.decimalCount === undefined ? 4 : this.props.decimalCount}
                     propertyName="value"
-                    min={this.props.minimum}
-                    max={this.props.maximum}
+                    min={this.props.allowOverflow ? undefined : this.props.minimum}
+                    max={this.props.allowOverflow ? undefined : this.props.maximum}
                     onEnter={() => {
                         const changed = this.prepareDataToRead(this.state.value);
                         this.onChange(changed);
@@ -169,7 +170,7 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
                 />
                 <div className="slider">
                     <input
-                        className="range"
+                        className={"range" + (this.props.allowOverflow && (this.state.value > this.props.maximum || this.state.value < this.props.minimum) ? " overflow" : "")}
                         type="range"
                         step={this.props.step}
                         min={this.prepareDataToRead(this.props.minimum)}