Allow sliders to go overflow (#15750)

BabylonJS · Oct 29, 2024 · 14f4d2e · 14f4d2e
1 parent cc75bbb
commit 14f4d2e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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)}