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

feat(Slider): tweak styles for a knob and add slider label

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-18 16:55:11 +03:00
parent f356851d97
commit 147df04c22
2 changed files with 76 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/shared/ui/ComboControlV2/ComboControlV2.svelte
View File

@@ -98,11 +98,11 @@ const handleInputChange: ChangeEventHandler<HTMLInputElement> = event => {
function calculateScale(index: number): number | string {
const calculate = () =>
orientation === 'horizontal'
? (control.min + (index * (control.max - control.min) / 4))
: (control.max - (index * (control.max - control.min) / 4));
? control.min + (index * (control.max - control.min)) / 4
: control.max - (index * (control.max - control.min)) / 4;
return Number.isInteger(control.step)
? Math.round(calculate())
: (calculate()).toFixed(2);
: calculate().toFixed(2);
}
</script>
@@ -111,7 +111,9 @@ function calculateScale(index: number): number | string {
class={cn(
'flex gap-4 sm:py-4 sm:px-1 rounded-xl transition-all duration-300',
'',
orientation === 'horizontal' ? 'flex-row items-end w-full' : 'flex-col items-center h-full',
orientation === 'horizontal'
? 'flex-row items-end w-full'
: 'flex-col items-center h-full',
className,
)}
>
@@ -120,7 +122,9 @@ function calculateScale(index: number): number | string {
<div
class={cn(
'absolute flex justify-between',
orientation === 'horizontal' ? 'flex-row w-full -top-5 px-0.5' : 'flex-col h-full -left-5 py-0.5',
orientation === 'horizontal'
? 'flex-row w-full -top-8 px-0.5'
: 'flex-col h-full -left-5 py-0.5',
)}
>
{#each Array(5) as _, i}
@@ -133,7 +137,12 @@ function calculateScale(index: number): number | string {
<span class="font-mono text-[0.375rem] text-text-muted tabular-nums">
{calculateScale(i)}
</span>
<div class={cn('bg-border-muted', orientation === 'horizontal' ? 'w-px h-1' : 'h-px w-1')}>
<div
class={cn(
'bg-border-muted',
orientation === 'horizontal' ? 'w-px h-1' : 'h-px w-1',
)}
>
</div>
</div>
{/each}
@@ -146,6 +155,7 @@ function calculateScale(index: number): number | string {
min={control.min}
max={control.max}
step={control.step}
{label}
{orientation}
/>
</div>
@@ -162,16 +172,6 @@ function calculateScale(index: number): number | string {
variant="ghost"
/>
{/if}
{#if label}
<div class="flex items-center gap-2 opacity-70">
<div class="w-1 h-1 rounded-full bg-foreground"></div>
<div class="w-px h-2 bg-text-muted/50"></div>
<span class="font-mono text-[8px] uppercase tracking-[0.2em] text-text-subtle font-medium">
{label}
</span>
</div>
{/if}
</div>
{/snippet}