feat(Slider): component redesign with complete storybook coverage
This commit is contained in:
Ilia Mashkov
@@ -9,7 +9,8 @@ const { Story } = defineMeta({
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Styled bits-ui slider component for selecting a value within a range.',
|
||||
component:
|
||||
'Styled bits-ui slider component with red accent (#ff3b30). Thumb is a 45° rotated square with hover/active scale animations.',
|
||||
},
|
||||
story: { inline: false }, // Render stories in iframe for state isolation
|
||||
},
|
||||
@@ -31,32 +32,110 @@ const { Story } = defineMeta({
|
||||
control: 'number',
|
||||
description: 'Step size for value increments',
|
||||
},
|
||||
label: {
|
||||
control: 'text',
|
||||
description: 'Optional label displayed inline on the track',
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
let value = $state(50);
|
||||
let valueLow = $state(25);
|
||||
let valueHigh = $state(75);
|
||||
</script>
|
||||
|
||||
<Story name="Horizontal" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value }}>
|
||||
{#snippet template(args)}
|
||||
<Slider bind:value {...args} />
|
||||
<div class="p-8">
|
||||
<Slider {...args} />
|
||||
<p class="mt-4 text-sm text-muted-foreground">Value: {args.value}</p>
|
||||
<p class="mt-2 text-xs text-muted-foreground">
|
||||
Hover over thumb to see scale effect, click and drag to interact
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Vertical" args={{ orientation: 'vertical', min: 0, max: 100, step: 1, value }}>
|
||||
{#snippet template(args)}
|
||||
<Slider bind:value {...args} />
|
||||
<div class="p-8 flex items-center gap-8 h-72">
|
||||
<Slider {...args} />
|
||||
<div>
|
||||
<p class="text-sm text-muted-foreground">Value: {args.value}</p>
|
||||
<p class="mt-2 text-xs text-muted-foreground">Vertical orientation with same red accent</p>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Label" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value, label: 'SIZE' }}>
|
||||
<Story name="With Label" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value }}>
|
||||
{#snippet template(args)}
|
||||
<Slider bind:value {...args} />
|
||||
<div class="p-8">
|
||||
<Slider {...args} />
|
||||
<p class="mt-4 text-sm text-muted-foreground">Slider with inline label</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Dark Mode"
|
||||
args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value }}
|
||||
parameters={{
|
||||
backgrounds: {
|
||||
default: 'dark',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{#snippet template(args)}
|
||||
<div class="p-8 bg-background">
|
||||
<Slider {...args} />
|
||||
<p class="mt-4 text-sm text-muted-foreground">Value: {args.value}</p>
|
||||
<p class="mt-2 text-xs text-muted-foreground">Dark mode: track uses neutral-800</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Interactive States" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value: 50 }}>
|
||||
{#snippet template(args)}
|
||||
<div class="p-8 space-y-8">
|
||||
<div>
|
||||
<p class="text-sm font-medium mb-2">Thumb: 45° rotated square</p>
|
||||
<Slider {...args} value={50} />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium mb-2">Hover State (scale-125)</p>
|
||||
<Slider {...args} value={50} />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium mb-2">Different Values</p>
|
||||
<div class="space-y-4">
|
||||
<Slider {...args} value={10} />
|
||||
<Slider {...args} value={50} />
|
||||
<Slider {...args} value={90} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium mb-2">Focus State (ring-2 ring-[#ff3b30]/20)</p>
|
||||
<p class="text-xs text-muted-foreground">Tab to the thumb to see focus ring</p>
|
||||
<Slider {...args} value={50} class="mt-2" />
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Step Sizes" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value }}>
|
||||
{#snippet template(args)}
|
||||
<div class="p-8 space-y-6">
|
||||
<div>
|
||||
<p class="text-sm font-medium mb-2">Step: 1 (default)</p>
|
||||
<Slider {...args} value={50} step={1} />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium mb-2">Step: 10</p>
|
||||
<Slider {...args} value={50} step={10} />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium mb-2">Step: 25</p>
|
||||
<Slider {...args} value={50} step={25} />
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -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'
|
||||
>
|
||||
& {
|
||||
interface Props {
|
||||
value?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
disabled?: boolean;
|
||||
orientation?: 'horizontal' | 'vertical';
|
||||
/**
|
||||
* Slider value, numeric.
|
||||
* Format the displayed value label.
|
||||
* @default (v) => v
|
||||
*/
|
||||
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;
|
||||
};
|
||||
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}
|
||||
{#if isVertical}
|
||||
<div class="inline-flex flex-col items-center gap-3 group h-full {className ?? ''}">
|
||||
<span class="{labelClasses} text-center">
|
||||
{format(value)}
|
||||
</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',
|
||||
)}
|
||||
/>
|
||||
|
||||
<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="
|
||||
absolute inset-0 rounded-full
|
||||
bg-background-20
|
||||
opacity-0 group-hover/thumb:opacity-100
|
||||
transition-opacity duration-200
|
||||
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
|
||||
"
|
||||
>
|
||||
</div>
|
||||
|
||||
{#snippet children({ thumbItems })}
|
||||
<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',
|
||||
)}
|
||||
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
|
||||
"
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
</Slider.Thumb>
|
||||
<Slider.Range class="absolute bg-brand w-full" />
|
||||
</span>
|
||||
|
||||
{#each thumbItems as thumb (thumb)}
|
||||
<Slider.Thumb
|
||||
index={thumb.index}
|
||||
class={thumbClasses}
|
||||
aria-label="Value"
|
||||
/>
|
||||
{/each}
|
||||
{/snippet}
|
||||
</Slider.Root>
|
||||
</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>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user