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
    }

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.