Slider with Number Input

<script lang="ts">
  import * as NumberInput from '@odbd/svelte/number-input'
  import * as Slider from '@odbd/svelte/slider'

  let value = $state(48)

  const updateFromSlider = (details: { value: number[] }) => {
    value = details.value[0] ?? value
  }

  const updateFromNumberInput = (details: { valueAsNumber: number }) => {
    if (!Number.isNaN(details.valueAsNumber)) {
      value = Math.min(100, Math.max(0, details.valueAsNumber))
    }
  }
</script>

<div class="examples-slider-number">
  <div class="examples-slider-number__header">
    <span>알림 강도</span>
    <strong>{value}%</strong>
  </div>

  <div class="examples-slider-number__controls">
    <Slider.Root
      value={[value]}
      min={0}
      max={100}
      step={1}
      aria-label={['알림 강도']}
      onValueChange={updateFromSlider}
    >
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>

    <NumberInput.Root
      value={String(value)}
      min={0}
      max={100}
      step={1}
      onValueChange={updateFromNumberInput}
    >
      <NumberInput.Label>값</NumberInput.Label>
      <NumberInput.Control>
        <NumberInput.DecrementTrigger aria-label="값 줄이기">−</NumberInput.DecrementTrigger>
        <NumberInput.Input />
        <NumberInput.IncrementTrigger aria-label="값 늘리기">+</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  </div>
</div>