Feature/slider #47
@@ -1,13 +1,16 @@
|
||||
<!--
|
||||
Component: Slider
|
||||
Single-value slider using bits-ui Slider primitive.
|
||||
Single-value slider built on a native role="slider" element (no bits-ui).
|
||||
Supports pointer drag, click-to-seek, touch, and full keyboard nav.
|
||||
Swiss design: 1px track, diamond thumb (rotate-45), brand accent.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import {
|
||||
type Orientation,
|
||||
Slider,
|
||||
} from 'bits-ui';
|
||||
pointerToValue,
|
||||
snapToStep,
|
||||
} from './slider-math';
|
||||
|
||||
type Orientation = 'horizontal' | 'vertical';
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
@@ -67,8 +70,106 @@ let {
|
||||
class: className,
|
||||
}: Props = $props();
|
||||
|
||||
/**
|
||||
* PageUp/PageDown move by this multiple of `step`.
|
||||
*/
|
||||
const LARGE_STEP_MULTIPLIER = 10;
|
||||
|
||||
const isVertical = $derived(orientation === 'vertical');
|
||||
|
||||
/**
|
||||
* Thumb/range offset as a clamped percentage of the track.
|
||||
*/
|
||||
const percent = $derived.by(() => {
|
||||
if (max <= min) {
|
||||
return 0;
|
||||
}
|
||||
return Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
|
||||
});
|
||||
|
||||
let trackEl: HTMLElement | undefined;
|
||||
let dragging = $state(false);
|
||||
|
||||
/**
|
||||
* Apply a candidate value: snap, clamp, store, and notify only on change.
|
||||
*/
|
||||
function commit(raw: number): void {
|
||||
const next = snapToStep(raw, { min, max, step });
|
||||
if (next !== value) {
|
||||
value = next;
|
||||
onValueChange?.(next);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve a pointer event to a value using the live track rect.
|
||||
*/
|
||||
function seek(event: PointerEvent): void {
|
||||
if (!trackEl) {
|
||||
return;
|
||||
}
|
||||
const rect = trackEl.getBoundingClientRect();
|
||||
commit(pointerToValue(event, rect, { min, max, step, orientation }));
|
||||
}
|
||||
|
||||
function handlePointerDown(event: PointerEvent): void {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
dragging = true;
|
||||
(event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);
|
||||
seek(event);
|
||||
}
|
||||
|
||||
function handlePointerMove(event: PointerEvent): void {
|
||||
if (!dragging || disabled) {
|
||||
return;
|
||||
}
|
||||
seek(event);
|
||||
}
|
||||
|
||||
function handlePointerUp(event: PointerEvent): void {
|
||||
if (!dragging) {
|
||||
return;
|
||||
}
|
||||
dragging = false;
|
||||
(event.currentTarget as HTMLElement).releasePointerCapture?.(event.pointerId);
|
||||
}
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent): void {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
const large = step * LARGE_STEP_MULTIPLIER;
|
||||
let next: number | undefined;
|
||||
switch (event.key) {
|
||||
case 'ArrowRight':
|
||||
case 'ArrowUp':
|
||||
next = value + step;
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
case 'ArrowDown':
|
||||
next = value - step;
|
||||
break;
|
||||
case 'PageUp':
|
||||
next = value + large;
|
||||
break;
|
||||
case 'PageDown':
|
||||
next = value - large;
|
||||
break;
|
||||
case 'Home':
|
||||
next = min;
|
||||
break;
|
||||
case 'End':
|
||||
next = max;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
commit(next);
|
||||
}
|
||||
|
||||
const labelClasses = `font-mono text-2xs tabular-nums shrink-0
|
||||
text-subtle
|
||||
group-hover:text-neutral-700 dark:group-hover:text-neutral-300
|
||||
@@ -91,81 +192,97 @@ const thumbClasses = `block w-2.5 h-2.5 bg-brand
|
||||
{format(value)}
|
||||
</span>
|
||||
|
||||
<Slider.Root
|
||||
type="single"
|
||||
orientation="vertical"
|
||||
bind:value
|
||||
{min}
|
||||
{max}
|
||||
{step}
|
||||
{disabled}
|
||||
onValueChange={(v => onValueChange?.(v))}
|
||||
<div
|
||||
bind:this={trackEl}
|
||||
role="presentation"
|
||||
onpointerdown={handlePointerDown}
|
||||
onpointermove={handlePointerMove}
|
||||
onpointerup={handlePointerUp}
|
||||
onpointercancel={handlePointerUp}
|
||||
class="
|
||||
relative flex flex-col items-center select-none touch-none
|
||||
w-5 h-full grow cursor-row-resize
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
"
|
||||
class:opacity-50={disabled}
|
||||
class:cursor-not-allowed={disabled}
|
||||
>
|
||||
{#snippet children({ thumbItems })}
|
||||
<span
|
||||
class="
|
||||
bg-neutral-200 dark:bg-neutral-800
|
||||
relative grow w-px overflow-visible
|
||||
group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700
|
||||
transition-colors
|
||||
"
|
||||
>
|
||||
<span
|
||||
class="
|
||||
bg-neutral-200 dark:bg-neutral-800
|
||||
relative grow w-px overflow-visible
|
||||
group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700
|
||||
transition-colors
|
||||
"
|
||||
>
|
||||
<Slider.Range class="absolute bg-brand w-full" />
|
||||
</span>
|
||||
class="absolute bottom-0 left-0 bg-brand w-full"
|
||||
style="height: {percent}%"
|
||||
></span>
|
||||
</span>
|
||||
|
||||
{#each thumbItems as thumb (thumb)}
|
||||
<Slider.Thumb
|
||||
index={thumb.index}
|
||||
class={thumbClasses}
|
||||
aria-label="Value"
|
||||
/>
|
||||
{/each}
|
||||
{/snippet}
|
||||
</Slider.Root>
|
||||
<span
|
||||
role="slider"
|
||||
tabindex={disabled ? -1 : 0}
|
||||
aria-label="Value"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemin={min}
|
||||
aria-valuemax={max}
|
||||
aria-valuenow={value}
|
||||
aria-disabled={disabled ? 'true' : undefined}
|
||||
data-active={dragging ? '' : undefined}
|
||||
onkeydown={handleKeyDown}
|
||||
class="{thumbClasses} absolute left-1/2 -translate-x-1/2 translate-y-1/2"
|
||||
style="bottom: {percent}%"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-center gap-4 group w-full {className ?? ''}">
|
||||
<Slider.Root
|
||||
type="single"
|
||||
orientation="horizontal"
|
||||
bind:value
|
||||
{min}
|
||||
{max}
|
||||
{step}
|
||||
{disabled}
|
||||
onValueChange={(v => onValueChange?.(v))}
|
||||
<div
|
||||
bind:this={trackEl}
|
||||
role="presentation"
|
||||
onpointerdown={handlePointerDown}
|
||||
onpointermove={handlePointerMove}
|
||||
onpointerup={handlePointerUp}
|
||||
onpointercancel={handlePointerUp}
|
||||
class="
|
||||
relative flex items-center select-none touch-none
|
||||
w-full h-5 cursor-col-resize
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
"
|
||||
class:opacity-50={disabled}
|
||||
class:cursor-not-allowed={disabled}
|
||||
>
|
||||
{#snippet children({ thumbItems })}
|
||||
<span
|
||||
class="
|
||||
bg-neutral-200 dark:bg-neutral-800
|
||||
relative grow h-px overflow-visible
|
||||
group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700
|
||||
transition-colors
|
||||
"
|
||||
>
|
||||
<span
|
||||
class="
|
||||
bg-neutral-200 dark:bg-neutral-800
|
||||
relative grow h-px overflow-visible
|
||||
group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700
|
||||
transition-colors
|
||||
"
|
||||
>
|
||||
<Slider.Range class="absolute bg-brand h-full" />
|
||||
</span>
|
||||
class="absolute top-0 left-0 bg-brand h-full"
|
||||
style="width: {percent}%"
|
||||
></span>
|
||||
</span>
|
||||
|
||||
{#each thumbItems as thumb (thumb)}
|
||||
<Slider.Thumb
|
||||
index={thumb.index}
|
||||
class={thumbClasses}
|
||||
aria-label="Value"
|
||||
/>
|
||||
{/each}
|
||||
{/snippet}
|
||||
</Slider.Root>
|
||||
<span
|
||||
role="slider"
|
||||
tabindex={disabled ? -1 : 0}
|
||||
aria-label="Value"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemin={min}
|
||||
aria-valuemax={max}
|
||||
aria-valuenow={value}
|
||||
aria-disabled={disabled ? 'true' : undefined}
|
||||
data-active={dragging ? '' : undefined}
|
||||
onkeydown={handleKeyDown}
|
||||
class="{thumbClasses} absolute top-1/2 -translate-y-1/2 -translate-x-1/2"
|
||||
style="left: {percent}%"
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<!-- Label: right of slider -->
|
||||
<span class="{labelClasses} w-12 text-right">
|
||||
|
||||
Reference in New Issue
Block a user