Display a set of up to 20 Input Range components with corresponding input fields. The sum of all values is balanced — meaning if one range input value changes, all other inputs respond accordingly.
Add the balanced property if you expect the input values in a balanced state on load (set serverside). Add the reset-button property to show a button which sets all input range items to an equal percentage.
'balanced' => false, 'resetButton' => false,
<x-inputBalance reset-button> <x-inputBalanceItem value="25" /> <x-inputBalanceItem value="25" /> <x-inputBalanceItem value="25" /> <x-inputBalanceItem value="25" /> </x-inputBalance>