feat(Slider): component redesign with complete storybook coverage
This commit is contained in:
Ilia Mashkov
+124
-119
@@ -1,137 +1,142 @@
|
||||
<!--
|
||||
Component: Slider
|
||||
Styled bits-ui slider component with single value.
|
||||
Single-value slider using bits-ui Slider primitive.
|
||||
Swiss design: 1px track, diamond thumb (rotate-45), brand accent.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||
import {
|
||||
Slider,
|
||||
type SliderRootProps,
|
||||
} from 'bits-ui';
|
||||
import { Slider } from 'bits-ui';
|
||||
|
||||
type Props =
|
||||
& Omit<
|
||||
SliderRootProps,
|
||||
'type' | 'onValueChange' | 'onValueCommit'
|
||||
>
|
||||
& {
|
||||
/**
|
||||
* Slider value, numeric.
|
||||
*/
|
||||
value: number;
|
||||
/**
|
||||
* Optional label displayed inline on the track before the filled range.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* A callback function called when the value changes.
|
||||
* @param newValue - number
|
||||
*/
|
||||
onValueChange?: (newValue: number) => void;
|
||||
/**
|
||||
* A callback function called when the user stops dragging the thumb and the value is committed.
|
||||
* @param newValue - number
|
||||
*/
|
||||
onValueCommit?: (newValue: number) => void;
|
||||
};
|
||||
interface Props {
|
||||
value?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
disabled?: boolean;
|
||||
orientation?: 'horizontal' | 'vertical';
|
||||
/**
|
||||
* Format the displayed value label.
|
||||
* @default (v) => v
|
||||
*/
|
||||
format?: (v: number) => string | number;
|
||||
onValueChange?: (v: number) => void;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
value = $bindable(),
|
||||
value = $bindable(0),
|
||||
min = 0,
|
||||
max = 100,
|
||||
step = 1,
|
||||
disabled = false,
|
||||
orientation = 'horizontal',
|
||||
format = (v: number) => v,
|
||||
onValueChange,
|
||||
class: className,
|
||||
label,
|
||||
...rest
|
||||
}: Props = $props();
|
||||
|
||||
const isVertical = $derived(orientation === 'vertical');
|
||||
|
||||
const labelClasses = `font-['Space_Mono'] text-[0.625rem] tabular-nums shrink-0
|
||||
text-neutral-500 dark:text-neutral-400
|
||||
group-hover:text-neutral-700 dark:group-hover:text-neutral-300
|
||||
transition-colors`;
|
||||
|
||||
const thumbClasses = `block w-2.5 h-2.5 bg-brand
|
||||
rotate-45 shadow-sm
|
||||
hover:scale-125
|
||||
focus-visible:outline-none
|
||||
focus-visible:ring-2 focus-visible:ring-brand/20
|
||||
data-active:scale-90
|
||||
transition-transform duration-150
|
||||
disabled:pointer-events-none disabled:opacity-50
|
||||
cursor-grab active:cursor-grabbing`;
|
||||
</script>
|
||||
|
||||
<Slider.Root
|
||||
bind:value
|
||||
class={cn(
|
||||
'relative flex h-full w-6 touch-none select-none items-center justify-center',
|
||||
orientation === 'horizontal' ? 'w-48 h-6' : 'w-6 h-48',
|
||||
className,
|
||||
)}
|
||||
type="single"
|
||||
{orientation}
|
||||
{...rest}
|
||||
>
|
||||
{#snippet children(props)}
|
||||
{#if label && orientation === 'horizontal'}
|
||||
<span class="absolute top-0 left-0 -translate-y-1/2 text-[0.5rem] uppercase text-gray-400">
|
||||
{label}
|
||||
</span>
|
||||
{/if}
|
||||
<span
|
||||
{...props}
|
||||
class={cn(
|
||||
'relative bg-background-muted rounded-full',
|
||||
orientation === 'horizontal' ? 'w-full h-px' : 'h-full w-px',
|
||||
)}
|
||||
>
|
||||
<Slider.Range
|
||||
class={cn(
|
||||
'absolute bg-foreground rounded-full',
|
||||
orientation === 'horizontal' ? 'h-full' : 'w-full',
|
||||
)}
|
||||
/>
|
||||
{#if isVertical}
|
||||
<div class="inline-flex flex-col items-center gap-3 group h-full {className ?? ''}">
|
||||
<span class="{labelClasses} text-center">
|
||||
{format(value)}
|
||||
</span>
|
||||
|
||||
<Slider.Thumb
|
||||
index={0}
|
||||
class={cn(
|
||||
'group/thumb relative block',
|
||||
'size-2',
|
||||
orientation === 'horizontal' ? '-top-1' : '-left-1',
|
||||
'rounded-full',
|
||||
'bg-foreground',
|
||||
// Glow shadow
|
||||
'shadow-[0_0_6px_rgba(0,0,0,0.4)]',
|
||||
// Smooth transitions only for size/position
|
||||
'duration-200 ease-out',
|
||||
orientation === 'horizontal'
|
||||
? 'transition-[height,top,left,box-shadow]'
|
||||
: 'transition-[width,top,left,box-shadow]',
|
||||
// Hover: bigger glow
|
||||
'hover:shadow-[0_0_10px_rgba(0,0,0,0.5)]',
|
||||
orientation === 'horizontal'
|
||||
? 'hover:size-3 hover:-top-[5.5px]'
|
||||
: 'hover:size-3 hover:-left-[5.5px]',
|
||||
// Active: smaller glow
|
||||
'active:shadow-[0_0_4px_rgba(0,0,0,0.3)]',
|
||||
orientation === 'horizontal'
|
||||
? 'active:h-2.5 active:-top-[4.5px]'
|
||||
: 'active:w-2.5 active:-left-[4.5px]',
|
||||
'focus:outline-none',
|
||||
'cursor-grab active:cursor-grabbing',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
<Slider.Root
|
||||
type="single"
|
||||
orientation="vertical"
|
||||
bind:value
|
||||
{min}
|
||||
{max}
|
||||
{step}
|
||||
{disabled}
|
||||
onValueChange={(v => onValueChange?.(v))}
|
||||
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
|
||||
"
|
||||
>
|
||||
{#snippet children({ thumbItems })}
|
||||
<span
|
||||
class="
|
||||
absolute inset-0 rounded-full
|
||||
bg-background-20
|
||||
opacity-0 group-hover/thumb:opacity-100
|
||||
transition-opacity duration-200
|
||||
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
|
||||
"
|
||||
>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class={cn(
|
||||
'absolute',
|
||||
orientation === 'horizontal'
|
||||
? '-top-8 left-1/2 -translate-x-1/2'
|
||||
: 'left-5 top-1/2 -translate-y-1/2',
|
||||
'px-1.5 py-0.5 rounded-md',
|
||||
'bg-foreground/90 backdrop-blur-sm',
|
||||
'font-mono text-[0.625rem] font-medium text-background',
|
||||
'opacity-0 group-hover/thumb:opacity-100',
|
||||
'transition-all duration-300',
|
||||
'pointer-events-none',
|
||||
'shadow-sm',
|
||||
)}
|
||||
>
|
||||
{value}
|
||||
<Slider.Range class="absolute bg-brand w-full" />
|
||||
</span>
|
||||
</Slider.Thumb>
|
||||
|
||||
{#each thumbItems as thumb (thumb)}
|
||||
<Slider.Thumb
|
||||
index={thumb.index}
|
||||
class={thumbClasses}
|
||||
aria-label="Value"
|
||||
/>
|
||||
{/each}
|
||||
{/snippet}
|
||||
</Slider.Root>
|
||||
</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))}
|
||||
class="
|
||||
relative flex items-center select-none touch-none
|
||||
w-full h-5 cursor-col-resize
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
"
|
||||
>
|
||||
{#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
|
||||
"
|
||||
>
|
||||
<Slider.Range class="absolute bg-brand h-full" />
|
||||
</span>
|
||||
|
||||
{#each thumbItems as thumb (thumb)}
|
||||
<Slider.Thumb
|
||||
index={thumb.index}
|
||||
class={thumbClasses}
|
||||
aria-label="Value"
|
||||
/>
|
||||
{/each}
|
||||
{/snippet}
|
||||
</Slider.Root>
|
||||
|
||||
<!-- Label: right of slider -->
|
||||
<span class="{labelClasses} w-12 text-right">
|
||||
{format(value)}
|
||||
</span>
|
||||
{/snippet}
|
||||
</Slider.Root>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user