fix: Validate range value

packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/ActionInspector.css

@@ -50,7 +50,11 @@
 }
 
 .ActionInspector > .content > .Block > .content .row .field.duration .TextField {
-  width: 45px;
+  width: 50px;
+}
+
+.ActionInspector > .content > .Block > .content .row .field.duration .TextField input {
+  min-width: 50px;
 }
 
 .ActionInspector .content .RemoveButton {

packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/PlaySoundAction/PlaySoundAction.tsx

@@ -146,8 +146,8 @@ const PlaySoundAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
       </div>
       <div className="row">
         <div className="field volume">
+          <label>Volume</label>
           <RangeField
-            label="Volume"
             value={volumeFromAudioSource(value.volume)}
             onChange={handleChangeVolume}
             isValidValue={isValidVolume}

packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/TweenAction/TweenAction.tsx

@@ -190,12 +190,8 @@ const TweenAction: React.FC<Props> = ({ tween: tweenProp, onUpdateTween }: Props
       </div>
       <div className="row">
         <div className="field duration">
-          <RangeField
-            label={<>Duration {renderDurationInfo()}</>}
-            value={tween.duration}
-            onChange={handleChangeDurationRange}
-            isValidValue={isValidDuration}
-          />
+          <label>Duration {renderDurationInfo()}</label>
+          <RangeField value={tween.duration} onChange={handleChangeDurationRange} isValidValue={isValidDuration} />
         </div>
       </div>
     </div>

packages/@dcl/inspector/src/components/ui/RangeField/RangeField.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import cx from 'classnames'
 
 import { TextField } from '../TextField'
@@ -26,13 +26,13 @@ const RangeField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
   const [inputValue, setInputValue] = useState(value)
 
   const completionPercentage = useMemo(() => {
-    const validValue = isValidValue && isValidValue(inputValue) ? inputValue : value
-    return Math.min(
-      ((parseInt(validValue.toString()) - parseInt(min.toString())) /
-        (parseInt(max.toString()) - parseInt(min.toString()))) *
-        100,
-      100
-    )
+    const parsedValue = parseInt(inputValue.toString(), 10) || 0
+    const parsedMin = parseInt(min.toString(), 10) || 0
+    const parsedMax = parseInt(max.toString(), 10) || 100
+
+    const normalizedValue = Math.min(Math.max(parsedValue, parsedMin), parsedMax)
+
+    return ((normalizedValue - parsedMin) / (parsedMax - parsedMin)) * 100 || 0
   }, [inputValue, min, max])
 
   // Create inline styles for the track with the completion color
@@ -43,13 +43,16 @@ const RangeField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const value = e.target.value
-      setInputValue(value)
+
+      if (parseFloat(value) >= parseFloat(min.toString()) && parseFloat(value) <= parseFloat(max.toString())) {
+        setInputValue(value)
+      }
 
       if (isValidValue && isValidValue(value)) {
         onChange && onChange(e)
       }
     },
-    [onChange, isValidValue, setInputValue]
+    [min, max, onChange, isValidValue, setInputValue]
   )
 
   const handleChangeTextField = useCallback(
@@ -86,7 +89,7 @@ const RangeField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
             ref={ref}
             type="range"
             className="RangeInput"
-            value={value}
+            value={inputValue}
             min={min}
             max={max}
             step={step}