AngleSlider experimental

Ark UI AngleSlider 기반 wrapper입니다. 원형 다이얼로 각도를 선택하는 root, label, control, thumb, marker-group, marker, value-text, hidden-input anatomy를 제공합니다.

@ark-ui/svelte/angle-slider Ark UI docs ↗

회전 각도

45도로 회전해요

<script lang="ts">
  import * as AngleSlider from '@odbd/svelte/angle-slider'

  let value = $state(45)
  const markers = [0, 90, 180, 270]
</script>

<AngleSlider.Root
  {value}
  onValueChange={(details) => (value = details.value)}
  style="max-width: 12rem;"
>
  <AngleSlider.Label>회전 각도</AngleSlider.Label>
  <AngleSlider.Control>
    <AngleSlider.Thumb />
    <AngleSlider.MarkerGroup>
      {#each markers as marker}
        <AngleSlider.Marker value={marker} />
      {/each}
    </AngleSlider.MarkerGroup>
  </AngleSlider.Control>
  <AngleSlider.ValueText>{value}도로 회전해요</AngleSlider.ValueText>
  <AngleSlider.HiddenInput />
</AngleSlider.Root>

Import

Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.

import * as AngleSlider from '@odbd/svelte/angle-slider'

import { AngleSlider } from '@odbd/react/angle-slider'