Feat/#3202 svelte slider snippet with argument (#3205)

Co-authored-by: Chris Simmons <[email protected]>
skeletonlabs · Feb 10, 2025 · 461d9de · 461d9de
1 parent 936df1b
commit 461d9de
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/proud-toys-exercise.md b/.changeset/proud-toys-exercise.md
@@ -0,0 +1,5 @@
+---
+'@skeletonlabs/skeleton-svelte': patch
+---
+
+feat: Make Svelte Slider marker snippet take the marker value as argument to enable marker customization
diff --git a/packages/skeleton-svelte/src/lib/components/Slider/Slider.svelte b/packages/skeleton-svelte/src/lib/components/Slider/Slider.svelte
@@ -107,7 +107,7 @@
 				<!-- Mark -->
 				<span {...api.getMarkerProps({ value })} class="{markBase} {markText} {markOpacity} {markClasses}" data-testid="slider-mark">
 					{#if mark}
-						{@render mark()}
+						{@render mark(value)}
 					{:else}
 						{value}
 					{/if}

diff --git a/packages/skeleton-svelte/src/lib/components/Slider/types.ts b/packages/skeleton-svelte/src/lib/components/Slider/types.ts
@@ -84,6 +84,6 @@ export interface SliderProps extends Omit<slider.Context, 'id' | 'thumbSize'> {
 	stateReadOnly?: string;
 
 	// Children
-	/** Replace numeric markers with symbol, such as a icon. */
-	mark?: Snippet;
+	/** Replace numeric markers with symbol, such as a icon. Takes marker value as argument. */
+	mark?: Snippet<[number]>;
 }