{#each items as item, i (i)} {@render row(i, item, rowActions(i))} {/each} {#snippet bandBox({ start, end }: Range, styles: string)}

{/snippet} {#snippet pill({ start, end }: Range)} {#if end > start} {@render bandBox( { start, end: end - 1 }, "relative z-10 mt-2.5 -mb-7.5 ml-2.5 w-5 rounded-full bg-(--range-fill) outline-1 outline-border-default" )} {:else} {@render bandBox( { start: end, end }, "relative z-10 mt-2.5 ml-2.5 size-5 self-start rounded-full bg-(--range-fill) outline-1 outline-border-default" )} {/if} {/snippet} {#snippet handle(grip: "start" | "end", label: string)} {@const single = gripRows.start === gripRows.end}

grab(e, single ? "both" : grip)} onkeydown={(e) => handleKeyDown(e, grip)} title="Drag or use arrow keys to adjust the range" >

{/snippet} {#if items.length > 0} {#if interacting} {@render bandBox(displayRows, "bg-background-subtle rounded")} {/if} {#if !muted} {@render bandBox(rowsOf(selectedRange, whole), "bg-background-subtle rounded")} {@render bandBox( rowsOf(selectedRange, whole), "relative z-10 rounded border border-border-default dark:border-border-strong" )} {/if} {@render pill(displayRows)} {#if gripRows.end > gripRows.start} {/if} {@render handle("start", "Range start")} {@render handle("end", "Range end")} {/if}