frontend-svelte/src/shared/ui/ComboControlV2/ComboControlV2.svelte

<!--
    Component: ComboControl
    Provides the same functionality as the original ComboControl but lacks increase/decrease buttons.
-->
<script lang="ts">
import type { TypographyControl } from '$shared/lib';
import { Input } from '$shared/shadcn/ui/input';
import { Slider } from '$shared/shadcn/ui/slider';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type { Orientation } from 'bits-ui';
import type { ChangeEventHandler } from 'svelte/elements';

interface Props {
    /**
     *  Typography control instance
     */
    control: TypographyControl;
    /**
     * Orientation of the component
     */
    orientation?: Orientation;
}

let {
    control,
    orientation = 'vertical',
}: Props = $props();

let sliderValue = $state(Number(control.value));

$effect(() => {
    sliderValue = Number(control?.value);
});

const handleInputChange: ChangeEventHandler<HTMLInputElement> = event => {
    const parsedValue = parseFloat(event.currentTarget.value);
    if (!isNaN(parsedValue)) {
        control.value = parsedValue;
    }
};

const handleSliderChange = (newValue: number) => {
    control.value = newValue;
};
</script>

<div class={cn('flex flex-col items-center gap-4 w-full', orientation === 'vertical' ? 'flex-col' : 'flex-row')}>
    <Input
        value={control.value}
        onchange={handleInputChange}
        min={control.min}
        max={control.max}
        class="w-14 h-8 text-xs text-center bg-white/40 border-none rounded-lg focus-visible:ring-indigo-500/50"
    />
    <Slider
        min={control.min}
        max={control.max}
        step={control.step}
        value={sliderValue}
        onValueChange={handleSliderChange}
        type="single"
        orientation={orientation}
        class={cn(orientation === 'vertical' ? 'h-30' : 'w-full')}
    />
</div>