Slider with Tooltip

<script lang="ts">
  import * as Slider from '@odbd/svelte/slider'
  import * as Tooltip from '@odbd/svelte/tooltip'

  type AsChildProps = () => object

  let value = $state(72)

  const updateValue = (details: { value: number[] }) => {
    value = details.value[0] ?? value
  }
</script>

<div class="examples-slider-tooltip">
  <div class="examples-slider-tooltip__header">
    <span>처리 임계값</span>
    <strong>{value}%</strong>
  </div>

  <Slider.Root
    value={[value]}
    min={0}
    max={100}
    step={1}
    aria-label={['처리 임계값']}
    onValueChange={updateValue}
  >
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>

      <Tooltip.Root open openDelay={0} closeDelay={0} positioning={{ placement: 'top', gutter: 8 }}>
        <Tooltip.Trigger>
          {#snippet asChild(props: AsChildProps)}
            <Slider.Thumb index={0} {...props()} aria-label={`처리 임계값 ${value}%`}>
              <Slider.HiddenInput />
            </Slider.Thumb>
          {/snippet}
        </Tooltip.Trigger>
        <Tooltip.Positioner>
          <Tooltip.Content>{value}%</Tooltip.Content>
        </Tooltip.Positioner>
      </Tooltip.Root>
    </Slider.Control>
  </Slider.Root>
</div>

<style>
  .examples-slider-tooltip {
    display: grid;
    width: min(100%, 28rem);
    gap: var(--odbd-space-4);
    padding-block: var(--odbd-space-6) var(--odbd-space-2);
  }

  .examples-slider-tooltip__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--odbd-space-4);
  }

  .examples-slider-tooltip__header span {
    color: var(--odbd-color-muted-foreground);
    font-weight: 650;
  }

  .examples-slider-tooltip__header strong {
    font-family: var(--odbd-font-mono);
    font-size: var(--odbd-font-size-lg);
  }

  .examples-slider-tooltip :global(.odbd-tooltip__content) {
    font-family: var(--odbd-font-mono);
    font-weight: 700;
  }
</style>