Slider with Number Input
Slider와 NumberInput이 같은 값을 공유해 드래그 조정과 정밀 입력을 동시에 제공합니다.
<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>