Slider - Dreamy UI

Slider

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

#

Import

Slider - The Slider component with context.
SliderTrack - The track for the slider.
SliderFilledTrack - The filled track for the slider.
SliderThumb - The thumb for the slider.

import { Slider, SliderTrack, SliderFilledTrack, SliderThumb } from "@dreamy-ui/react";

#

Usage

<Slider>
	<SliderTrack maxW="xs">
		<SliderFilledTrack />
		<SliderThumb />
	</SliderTrack>
</Slider>

#

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
                min={0}
                max={50}
                step={10}
                value={value}
                onChangeValue={setValue}
                >
                <SliderTrack maxW="xs">
                    <SliderFilledTrack />
                    <SliderThumb />
                </SliderTrack>
            </Slider>
        </>
    );
}

#

Size

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

<VStack w="full" gap={10}>
	<Slider size='sm'>
		<SliderTrack maxW="xs">
			<SliderFilledTrack />
			<SliderThumb />
		</SliderTrack>
	</Slider>
	<Slider size='md'>
		<SliderTrack maxW="xs">
			<SliderFilledTrack />
			<SliderThumb />
		</SliderTrack>
	</Slider>
	<Slider size='lg'>
		<SliderTrack maxW="xs">
			<SliderFilledTrack />
			<SliderThumb />
		</SliderTrack>
	</Slider>
</VStack>

#

Scheme

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

<VStack w="full" gap={10}>
	<Slider scheme="primary">
		<SliderTrack maxW="xs">
			<SliderFilledTrack />
			<SliderThumb />
		</SliderTrack>
	</Slider>
	<Slider scheme="secondary">
		<SliderTrack maxW="xs">
			<SliderFilledTrack />
			<SliderThumb />
		</SliderTrack>
	</Slider>
	<Slider scheme="info">
		<SliderTrack maxW="xs">
			<SliderFilledTrack />
			<SliderThumb />
		</SliderTrack>
	</Slider>
	<Slider scheme="success">
		<SliderTrack maxW="xs">
			<SliderFilledTrack />
			<SliderThumb />
		</SliderTrack>
	</Slider>
	<Slider scheme="warning">
		<SliderTrack maxW="xs">
			<SliderFilledTrack />
			<SliderThumb />
		</SliderTrack>
	</Slider>
	<Slider scheme="error">
		<SliderTrack maxW="xs">
			<SliderFilledTrack />
			<SliderThumb />
		</SliderTrack>
	</Slider>
	<Slider scheme="none">
		<SliderTrack maxW="xs">
			<SliderFilledTrack />
			<SliderThumb />
		</SliderTrack>
	</Slider>
</VStack>

#

Orientation

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

<Slider orientation="vertical" h="200px">
	<SliderTrack maxW="xs">
		<SliderFilledTrack />
		<SliderThumb />
	</SliderTrack>
</Slider>

#

Reversed

You can reverse the Slider by using the isReversed prop.

<Slider isReversed>
	<SliderTrack maxW="xs">
		<SliderFilledTrack />
		<SliderThumb />
	</SliderTrack>
</Slider>

#

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 value={value} onChangeValue={setValue}>
                <SliderTrack maxW="xs">
                    <SliderFilledTrack />
                    <SliderThumb />
                </SliderTrack>
            </Slider>
        </>
    );
}

Skeleton

Snippet