Slider

import { Slider } from '@/components/ui/slider';

export default function BasicDemo() {
    return <Slider defaultValue={50} className="max-w-3xs mx-auto w-full" />;
}

import { Slider } from '@/components/ui/slider';

export default function StepDemo() {
    return <Slider defaultValue={20} step={20} className="max-w-3xs mx-auto w-full" />;
}

import { Slider } from '@/components/ui/slider';

export default function RangeDemo() {
    return <Slider defaultValue={[20, 80]} className="max-w-3xs mx-auto w-full" />;
}

import { Slider } from '@/components/ui/slider';

export default function ThumbsDistanceDemo() {
    return <Slider defaultValue={[20, 80]} className="max-w-3xs mx-auto w-full" minStepsBetweenThumbs={20} />;
}

import { Slider } from '@/components/ui/slider';

export default function VerticalDemo() {
    return (
        <div className="grid grid-cols-3 h-56 gap-4 w-fit mx-auto">
            {sliders.map((item, index) => (
                <div key={item} className="flex flex-col items-center justify-center gap-3">
                    <Slider defaultValue={Math.max(Math.random() * 100, 0)} orientation="vertical" key={index} />
                    <span className="font-mono text-xs uppercase text-surface-500">{item}</span>
                </div>
            ))}
        </div>
    );
}

const sliders = ['Bass', 'Mid', 'Treble'];

import { Slider } from '@/components/ui/slider';

export default function DisabledDemo() {
    return (
        <div className="max-w-3xs w-full mx-auto space-y-12">
            <Slider defaultValue={50} disabled />
        </div>
    );
}

'use client';
import { InputNumberValueChangeEvent } from 'primereact/inputnumber';
import { SliderRootChangeEvent } from 'primereact/slider';
import { InputNumber } from '@/components/ui/inputnumber';
import { Slider } from '@/components/ui/slider';
import * as React from 'react';

export default function ControlledDemo() {
    const [value, setValue] = React.useState(50);

    return (
        <div className="max-w-3xs w-full mx-auto">
            <InputNumber value={value} onValueChange={(e: InputNumberValueChangeEvent) => setValue(e.value as number)} fluid className="mb-4" />
            <Slider value={value} onValueChange={(e: SliderRootChangeEvent) => setValue(e.value as number)} className="w-full" />
        </div>
    );
}

'use client';
import type { SliderRootChangeEvent } from 'primereact/slider';
import { Slider } from '@/components/ui/slider';
import * as React from 'react';

export default function ValueChangeDemo() {
    const [value, setValue] = React.useState(50);
    const [endValue, setEndValue] = React.useState(50);

    return (
        <div className="max-w-3xs mx-auto w-full flex flex-col items-center space-y-4">
            <div className="text-sm text-surface-500 font-mono">onValueChange: {value}</div>

            <div className="text-sm text-surface-500 font-mono"> onValueChangeEnd: {endValue}</div>
            <Slider
                value={value}
                onValueChange={(e: SliderRootChangeEvent) => setValue(e.value as number)}
                onValueChangeEnd={(e: SliderRootChangeEvent) => setEndValue(e.value as number)}
                className="w-full"
            />
        </div>
    );
}

'use client';
import type { SliderRootChangeEvent } from 'primereact/slider';
import type { ToggleButtonGroupValueChangeEvent } from 'primereact/togglebuttongroup';
import { Slider } from '@/components/ui/slider';
import { ToggleButton } from '@/components/ui/togglebutton';
import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
import Image from 'next/image';
import * as React from 'react';

export default function FilterDemo() {
    const [filter, setFilter] = React.useState(0);
    const [filterValues, setFilterValues] = React.useState([100, 100, 0]);

    const filterStyle = React.useMemo(() => {
        return {
            filter: `contrast(${filterValues[0]}%) brightness(${filterValues[1]}%) sepia(${filterValues[2]}%)`
        };
    }, [filterValues]);

    return (
        <div className="flex flex-col items-center justify-center">
            <Image
                alt="user header"
                className="w-80 rounded mb-6"
                src="https://primefaces.org/cdn/primevue/images/card-vue.jpg"
                style={filterStyle}
                width={320}
                height={240}
            />
            <ToggleButtonGroup value={filter} onValueChange={(e: ToggleButtonGroupValueChangeEvent) => setFilter(e.value as number)}>
                <ToggleButton value={0}>Contrast</ToggleButton>
                <ToggleButton value={1}>Brightness</ToggleButton>
                <ToggleButton value={2}>Sepia</ToggleButton>
            </ToggleButtonGroup>
            <Slider
                value={filterValues[filter]}
                onValueChange={(e: SliderRootChangeEvent) =>
                    setFilterValues((prev) => {
                        const updated = [...prev];

                        updated[filter] = e.value as number;

                        return updated;
                    })
                }
                className="w-56 mt-4"
                min={0}
                max={200}
            />
        </div>
    );
}