Slider for picking a lock-period (in days) with an optional penalty-curve hint underneath. Designed for stake-and-lock contracts where users choose how long to commit (any min/max range; pass what your contract enforces).
Web3.Ui.LockPeriod.view []
{ value = model.lockDays
, onChange = LockDaysChanged
, min = 1
, max = 365
, penaltyAtMax = Just 35 -- 35% penalty at full early-exit
, inputAttrs = []
}The slider renders a native <input type="range" /> for accessibility, with the
penalty hint as a side-by-side <output>. Style via web3-lockperiod,
web3-lockperiod__slider, web3-lockperiod__readout, web3-lockperiod__penalty.
Slider configuration. penaltyAtMax is the maximum early-exit penalty in
percent (e.g., Just 35 for 35%). When Nothing, no penalty hint is shown.
inputAttrs reach the <input type="range" /> itself. The root is the wrapper
that also holds the readout and the penalty hint, so id, disabled and
aria-describedby -- which belong on the control -- go here instead.
Render the slider.