<script lang="ts">
  let {
    min = 0,
    max = 100,
    value = $bindable(50),
    label = '',
    disabled = false,
  } = $props();

  const inputId = $derived(`slider-${Math.random().toString(36).slice(2)}`);
</script>

<div>
  {#if label}
    <div class="mb-1.5 flex items-center justify-between">
      <label for={inputId} class="text-sm font-medium text-stein-700">
        {label}
      </label>
      <span class="text-sm font-semibold text-stein-700">{value}</span>
    </div>
  {/if}
  <input
    type="range"
    id={inputId}
    {min}
    {max}
    bind:value
    {disabled}
    aria-valuemin={min}
    aria-valuemax={max}
    aria-valuenow={value}
    aria-valuetext={String(value)}
    class="h-5 w-5 accent-wald-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-wald-500 [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-stein-200"
  />
  <div class="mt-1 flex justify-between text-xs text-stein-500">
    <span>{min}</span>
    <span>{max}</span>
  </div>
</div>
