Range Slider - Dreamy UI

Range Slider

Range Slider is a component that allows you to select a range between two values.

#

Installation

pnpm dlx dreamy add range-slider

#

Usage

<RangeSlider.Root maxW="xs">
	<RangeSlider.Track>
		<RangeSlider.FilledTrack />
		<RangeSlider.Thumb index={0} />
		<RangeSlider.Thumb index={1} />
	</RangeSlider.Track>
</RangeSlider.Root>

#

Max, Min, Step

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

Range: 0 - 25

function MaxMinRangeSlider() {
    const [value, setValue] = useState<[number, number]>([0, 25]);
 
    return (
        <>
            <Text>
                Range: {value[0]} - {value[1]}
            </Text>
 
            <RangeSlider.Root
                maxW="xs"
                min={0}
                max={50}
                step={5}
                value={value}
                onChangeValue={setValue}
            >
                <RangeSlider.Track>
                    <RangeSlider.FilledTrack />
                    <RangeSlider.Thumb index={0} />
                    <RangeSlider.Thumb index={1} />
                </RangeSlider.Track>
            </RangeSlider.Root>
        </>
    );
}

#

Size

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

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

#

Scheme

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

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

#

Orientation

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

<RangeSlider.Root orientation="vertical" h="200px" maxW="xs">
	<RangeSlider.Track>
		<RangeSlider.FilledTrack />
		<RangeSlider.Thumb index={0} />
		<RangeSlider.Thumb index={1} />
	</RangeSlider.Track>
</RangeSlider.Root>

#

Reversed

You can reverse the Range Slider by using the isReversed prop.

<RangeSlider.Root isReversed maxW="xs">
	<RangeSlider.Track>
		<RangeSlider.FilledTrack />
		<RangeSlider.Thumb index={0} />
		<RangeSlider.Thumb index={1} />
	</RangeSlider.Track>
</RangeSlider.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}>
	<RangeSlider.Root thumbSize={16} maxW="xs">
		<RangeSlider.Track>
			<RangeSlider.FilledTrack />
			<RangeSlider.Thumb index={0} />
			<RangeSlider.Thumb index={1} />
		</RangeSlider.Track>
	</RangeSlider.Root>
	<RangeSlider.Root thumbSize={32} maxW="xs">
		<RangeSlider.Track>
			<RangeSlider.FilledTrack />
			<RangeSlider.Thumb index={0} />
			<RangeSlider.Thumb index={1} />
		</RangeSlider.Track>
	</RangeSlider.Root>
	<RangeSlider.Root thumbSize={48} scheme="info" maxW="xs">
		<RangeSlider.Track>
			<RangeSlider.FilledTrack />
			<RangeSlider.Thumb index={0} />
			<RangeSlider.Thumb index={1} />
		</RangeSlider.Track>
	</RangeSlider.Root>
</VStack>

#

Controlled

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

Range: 25 - 75

function ControlledRangeSlider() {
    const [value, setValue] = useState<[number, number]>([25, 75]);
 
    return (
        <>
            <Text>
                Range: {value[0]} - {value[1]}
            </Text>
 
            <RangeSlider.Root value={value} onChangeValue={setValue} maxW="xs">
                <RangeSlider.Track>
                    <RangeSlider.FilledTrack />
                    <RangeSlider.Thumb index={0} />
                    <RangeSlider.Thumb index={1} />
                </RangeSlider.Track>
            </RangeSlider.Root>
        </>
    );
}

Radio Card

Select