먼저, Svelte 컴포넌트에서 상태 값을 만들어주어야 합니다. 상태 값은 사용자의 입력 또는 기타 작업에 따라 변경됩니다. 이 예제에서는 value라는 상태 값을 사용해보도록 하겠습니다.

<script>
  import { onMount, onDestroy } from 'svelte';

  let value = 0;
  let min = 0;
  let max = 100;

  function handleChange(event) {
    value = event.target.value;
  }

  let slider;

  onMount(() => {
    slider = document.getElementById('slider');
    slider.addEventListener('input', handleChange);
  });

  onDestroy(() => {
    slider.removeEventListener('input', handleChange);
  });
</script>

<style>
  .slider {
    width: 100%;
  }
</style>

<input
  type="range"
  id="slider"
  class="slider"
  min={min}
  max={max}
  bind:value
/>
<p>Value: {value}</p>

위의 코드를 보면, value 변수가 슬라이더의 현재 값과 양방향으로 바인딩되어 있음을 확인할 수 있습니다. 따라서 슬라이더를 움직일 때마다 handleChange 함수가 호출되어 value 변수가 업데이트되고, 이를 통해 화면이 갱신됩니다.

위의 코드에서는 onMount 함수와 onDestroy 함수를 사용하여 컴포넌트의 마운트 및 언마운트 시점에 이벤트 리스너를 추가하고 제거하는 작업도 수행하고 있습니다. 이는 메모리 누수를 방지하기 위해 권장되는 방법입니다.

추가로 슬라이더의 스타일링을 위해 style 태그 내에 .slider 클래스를 정의하였습니다. 이 예제에서는 전체 너비를 차지하기 위해 width: 100%를 적용하였습니다.

코드의 마지막 부분에서는 현재 value 값을 간단히 출력하기 위해 <p> 요소를 사용하였습니다.

이제 위의 코드를 Svelte 애플리케이션에 포함시키면 브라우저에 슬라이더 컴포넌트가 나타날 것입니다. 슬라이더를 움직이면 값이 변경되고, 화면에 표시된 Value: {value} 부분도 함께 변경됩니다.

Svelte에서 슬라이더를 구현하는 방법을 간단하게 소개해드렸습니다. 이를 바탕으로 필요한 추가 기능을 구현할 수 있을 것입니다. 상태 값의 변경 및 이벤트 처리를 활용하여 원하는 동작을 구현해보세요.