glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Slider): change thumb shape to circle

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-15 22:57:29 +03:00
parent c2d0992015
commit 6001f50cf5
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/shared/ui/Slider/Slider.svelte
View File

@@ -54,7 +54,8 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
index={0} index={0}
class={cn( class={cn(
'group/thumb relative block', 'group/thumb relative block',
orientation === 'horizontal' ? '-top-1 w-2 h-2.25' : '-left-1 h-2 w-2.25', 'size-2',
orientation === 'horizontal' ? '-top-1' : '-left-1',
'rounded-sm', 'rounded-sm',
'bg-foreground', 'bg-foreground',
// Glow shadow // Glow shadow
@@ -64,7 +65,7 @@ let { value = $bindable(), orientation = 'horizontal', class: className, ...rest
orientation === 'horizontal' ? 'transition-[height,top,left,box-shadow]' : 'transition-[width,top,left,box-shadow]', orientation === 'horizontal' ? 'transition-[height,top,left,box-shadow]' : 'transition-[width,top,left,box-shadow]',
// Hover: bigger glow // Hover: bigger glow
'hover:shadow-[0_0_10px_rgba(0,0,0,0.5)]', 'hover:shadow-[0_0_10px_rgba(0,0,0,0.5)]',
orientation === 'horizontal' ? 'hover:h-3 hover:-top-[5.5px]' : 'hover:w-3 hover:-left-[5.5px]', orientation === 'horizontal' ? 'hover:size-3 hover:-top-[5.5px]' : 'hover:size-3 hover:-left-[5.5px]',
// Active: smaller glow // Active: smaller glow
'active:shadow-[0_0_4px_rgba(0,0,0,0.3)]', '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]', orientation === 'horizontal' ? 'active:h-2.5 active:-top-[4.5px]' : 'active:w-2.5 active:-left-[4.5px]',