Slider - Dreamy UI

Slider

Slider is a component that allows you to select a value from a range of values.

#

Installation

npx dreamy add slider

pnpm dlx dreamy add slider

yarn dlx dreamy add slider

bunx dreamy add slider

#

Usage

<Slider.Root>
	<Slider.Track maxW="xs">
		<Slider.FilledTrack />
		<Slider.Thumb />
	</Slider.Track>
</Slider.Root>

#

Max, Min, Step

You can change the max, min, and step of the Slider by using the max, min, and step props.

Slider value: 0

function MaxMinSlider() {
    const [value, setValue] = useState(0);
 
    return (
        <>
            <Text>
                Slider value: {value}
            </Text>
 
            <Slider.Root
                min={0}
                max={50}
                step={10}
                value={value}
                onChangeValue={setValue}
                >
                <Slider.Track maxW="xs">
                    <Slider.FilledTrack />
                    <Slider.Thumb />
                </Slider.Track>
            </Slider.Root>
        </>
    );
}

#

Size

You can change the size of the Slider by using the size prop. This adjusts both the track height/width and the thumb size.

<VStack w="full" gap={10}>
	<Slider.Root size='sm'>
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Root>
	<Slider.Root size='md'>
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Root>
	<Slider.Root size='lg'>
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Root>
</VStack>

#

Scheme

You can change the scheme of the Slider by using the scheme prop.

<VStack w="full" gap={10}>
	<Slider.Root scheme="primary">
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Root>
	<Slider.Root scheme="secondary">
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Root>
	<Slider.Root scheme="info">
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Root>
	<Slider.Root scheme="success">
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Root>
	<Slider.Root scheme="warning">
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Root>
	<Slider.Root scheme="error">
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Root>
	<Slider.Root scheme="none">
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Root>
</VStack>

#

Orientation

You can change the orientation of the Slider by using the orientation prop.

<Slider.Root orientation="vertical" h="200px">
	<Slider.Track maxW="xs">
		<Slider.FilledTrack />
		<Slider.Thumb />
	</Slider.Track>
</Slider.Root>

#

Reversed

You can reverse the Slider by using the isReversed prop.

<Slider.Root isReversed>
	<Slider.Track maxW="xs">
		<Slider.FilledTrack />
		<Slider.Thumb />
	</Slider.Track>
</Slider.Root>

#

Custom Thumb Size

You can set a custom thumb size by using the thumbSize prop (in pixels). This is useful when you need precise control over the thumb size beyond the predefined size variants.

<VStack w="full" gap={10}>
	<Slider.Root thumbSize={16}>
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Root>
	<Slider.Root thumbSize={32}>
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Root>
	<Slider.Root thumbSize={48} scheme="info">
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
			<Slider.Thumb />
		</Slider.Track>
	</Slider.Root>
</VStack>

#

Hide Thumb

You can hide the slider thumb by using the hideThumb prop. This is useful when you want a simpler slider appearance.

<VStack w="full" gap={10}>
	<Slider.Root hideThumb>
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
		</Slider.Track>
	</Slider.Root>
	<Slider.Root hideThumb scheme="success" defaultValue={70}>
		<Slider.Track maxW="xs">
			<Slider.FilledTrack />
		</Slider.Track>
	</Slider.Root>
</VStack>

#

Controlled

You can control the Slider by using the value prop. ControlledSlider

Slider value: 0

function ControlledSlider() {
    const [value, setValue] = useState(0);
 
    return (
        <>
            <Text>
                Slider value: {value}
            </Text>
 
            <Slider.Root value={value} onChangeValue={setValue}>
                <Slider.Track maxW="xs">
                    <Slider.FilledTrack />
                    <Slider.Thumb />
                </Slider.Track>
            </Slider.Root>
        </>
    );
}

Skeleton

Snippet