Slider

1import { Slider } from '@/components/ui/slider'
2
3type SliderProps = React.ComponentProps<typeof Slider>
4
5export function SliderDemo({ className, ...props }: SliderProps) {
6    return (
7        <Slider
8            min={0}
9            max={100}
10            step={1}
11            defaultValue={[40]}
12            className="mt-2"
13        />
14    )
15}
16

1import { Slider } from '@/components/ui/slider'
2
3type SliderProps = React.ComponentProps<typeof Slider>
4
5export function SliderOrientationDemo({ className, ...props }: SliderProps) {
6    return (
7        <Slider
8            min={0}
9            max={100}
10            step={1}
11            defaultValue={[30]}
12            orientation="vertical"
13            className="mt-2"
14        />
15    )
16}
17

1'use client'
2
3import { useState } from 'react'
4
5import { Label } from '@/components/ui/label'
6import { Slider } from '@/components/ui/slider'
7
8type SliderProps = React.ComponentProps<typeof Slider>
9
10export function SliderValueDemo({ className, ...props }: SliderProps) {
11    const [value, setValue] = useState([40])
12    return (
13        <div className="flex flex-col items-center justify-center gap-3">
14            <Label className='text-primary'>Volume</Label>
15            <Slider
16                min={0}
17                max={100}
18                step={1}
19                value={value}
20                onValueChange={setValue}
21            />
22            <p className="text-sm">Value: <span className="font-bold">{value[0]} %</span></p>
23        </div>
24    )
25}
26

1'use client'
2
3import { useState } from 'react'
4
5import { Label } from '@/components/ui/label'
6import { Slider } from '@/components/ui/slider'
7
8type SliderProps = React.ComponentProps<typeof Slider>
9
10export function SliderRangeDemo({ className, ...props }: SliderProps) {
11    const [range, setRange] = useState([50, 280])
12    return (
13        <div className="flex flex-col items-center justify-center gap-3">
14            <Label className='text-primary'>Price Range</Label>
15            <Slider
16                min={10}
17                max={500}
18                step={1}
19                value={range}
20                onValueChange={setRange}
21            />
22            <p className="text-sm">
23                Range:{' '}
24                <span className="font-bold">
25                    {range[0]} -{range[1]}
26                </span>
27            </p>
28        </div>
29    )
30}
31

1'use client'
2
3import * as React from 'react'
4import { Volume2, VolumeX } from 'lucide-react'
5
6import { Button } from '@/components/ui/button'
7import { Slider } from '@/components/ui/slider'
8
9export function SliderWithIconsDemo() {
10    const [value, setValue] = React.useState([30])
11    const maxValue = 100
12
13    const handleMute = () => setValue([0])
14    const handleIncrease = () => setValue([Math.min(value[0] + 5, maxValue)])
15    return (
16        <div className="flex flex-col items-center">
17            <div className="flex items-center justify-center gap-3">
18                <Button variant={'outline'} size={'icon'} onClick={handleMute}>
19                    <VolumeX className="text-muted-foreground h-4 w-4" />
20                </Button>
21                <Slider
22                    value={value}
23                    onValueChange={setValue}
24                    max={100}
25                    step={1}
26                    className="min-w-42 sm:min-w-96"
27                />
28                <Button
29                    variant={'outline'}
30                    size={'icon'}
31                    onClick={handleIncrease}
32                >
33                    <Volume2 className="text-muted-foreground h-4 w-4" />
34                </Button>
35            </div>
36            <div>
37                <p className="text-sm font-medium">
38                    Volume: <span className="font-bold">{value[0]}</span>
39                </p>
40            </div>
41        </div>
42    )
43}
44