<script>
  let value = 8
</script>

<div>
  <NumberInput bind:value={value} label="Input" />
</div>

<script>
  let minMax = 5
  let stepValue = 500
  let noControls = 5
  let controlsType = 5
</script>

<div>
  <NumberInput
    bind:value={minMax}
    label="Min - Max boundaries"
    min={0}
    max={10}
  />
  <NumberInput
    bind:value={stepValue}
    label="Step"
    step={100}
  />
  <NumberInput
    bind:value={noControls}
    label="No controls"
    controls={false}
  />
  <NumberInput
    bind:value={controlsType}
    label="Controls type"
    controlsType="primary"
  />
</div>

<script>
  let balance = 62_217.84
  let duration = 6.5

  function formatToHour(value: number) {
    const hours = Math.floor(value);
    const minutes = (value - hours) * 60;
    return `${hours}h${minutes < 10 ? '0' : ''}${Math.round(minutes)}`;
  }
</script>

<div>
  <NumberInput
    label="US Locale"
    bind:value={balance}
    format="en-US"
    prefix="$"
  />
  <NumberInput
    label="User Locale"
    bind:value={balance}
    format="locale"
  />
  <NumberInput
    label="Custom formatting"
    bind:value={duration}
    step={0.25}
    min={0}
    format={formatToHour}
  />
</div>