@@ -31,9 +31,10 @@ rawComponent =
3131 \(props ∷ { | PropsOptional }) ref -> React.do
3232 let min = props.min ?|| 0
3333 let max = props.max ?|| 100
34− let v = props.value ?|| ((max - min) / 2)
34+ let v = props.value ?|| min
3535 let disabled = props.disabled ?|| false
36− value /\ setValue <- useState' v
36+ fallbackValue /\ setFallbackValue <- useState' v
37+ let value = props.value ?|| fallbackValue
3738 hasFocus /\ setHasFocus <- useState' false
3839 pure
3940 $ div
@@ -41,7 +42,7 @@ rawComponent =
4142 , css: Style.container <> guard disabled Style.inputDisabled
4243 , onFocus: handler_ $ setHasFocus true
4344 , onBlur: handler_ $ setHasFocus false
44− , style: fold props.style <> css { "--val": value, "--max": max - min }
45+ , style: fold props.style <> css { "--val": value - min, "--max": max - min }
4546 , _data: Object.singleton "testid" "range-testid"
4647 }
4748 /> [ div </*> { className: "ry-range-filled", css: Style.filled <> guard disabled Style.disabled }
@@ -61,7 +62,7 @@ rawComponent =
6162 , type: "range"
6263 , onChange:
6364 composeHandler
64− (handler Event.targetValue ((_ >>= Int.fromString) >>> (foldMap setValue)))
65+ (handler Event.targetValue ((_ >>= Int.fromString) >>> (foldMap setFallbackValue)))
6566 props.onChange
6667 }
6768 ]