Chakra UI Form Range Slider

Chakra UI is a popular React component library that provides a set of accessible and customizable UI components. Among its many features, Chakra UI includes a versatile Range Slider component, allowing users to easily implement user-friendly sliders for selecting numeric ranges within forms. In this article, we will see the practical implementation of various Range Slider types provided by the Chakra UI Form Range Slider component.

Prerequisites:

• NPM & NodeJS
• React
• ReactJS Chakra UI

Approach:

We have created Chakra UI Form Ranger Sliders like Basic Range Sliders, Colored Range Sliders, Vertical Range Sliders, Custom Styled Range Sliders, and Discrete Range Sliders. All the sliders are multi-thumb sliders, through which the user can select a range of values.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app chakra

Step 2: After creating your project folder(i.e. chakra), move to it by using the following command:

cd chakra

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

The updated dependencies are in the package.json file.

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
 }

Example: Below is the practical implementation of the Chakra UI Form Range Slider:

Javascript

import {
    ChakraProvider,
    Box,
    Heading,
    Flex,
    VStack,
    Text,
} from "@chakra-ui/react";
import {
    RangeSlider,
    RangeSliderTrack,
    RangeSliderFilledTrack,
    RangeSliderThumb,
} from "@chakra-ui/react";
function App() {
    return (
        <ChakraProvider>
            <Box p={8} maxW="600px" mx="auto">
                <Heading mb={4}
                    textAlign="center"
                    color="green.500">
                    GeeksforGeeks
                </Heading>
                <Heading mb={4} textAlign="center">
                    Chakra UI Form Range Slider
                </Heading>
                <VStack spacing={4} mb={8}>
                    <Heading size="md">
                        Basic Range Slider
                    </Heading>
                    <RangeSlider
                        aria-label={["min", "max"]}
                        defaultValue={[10, 30]}>
                        <RangeSliderTrack>
                            <RangeSliderFilledTrack />
                        </RangeSliderTrack>
                        <RangeSliderThumb index={0} />
                        <RangeSliderThumb index={1} />
                    </RangeSlider>
                    <Flex justify="space-between"
                        w="full">
                        <Text>Min: 10</Text>
                        <Text>Max: 30</Text>
                    </Flex>
                </VStack>
                <VStack spacing={4} mb={8}>
                    <Heading size="md">
                        Colored Range Slider
                    </Heading>
                    <RangeSlider
                        aria-label={["min", "max"]}
                        colorScheme="teal"
                        defaultValue={[10, 30]}
                    >
                        <RangeSliderTrack>
                            <RangeSliderFilledTrack />
                        </RangeSliderTrack>
                        <RangeSliderThumb index={0} />
                        <RangeSliderThumb index={1} />
                    </RangeSlider>
                    <Flex justify="space-between" w="full">
                        <Text>Min: 10</Text>
                        <Text>Max: 30</Text>
                    </Flex>
                </VStack>
                <VStack spacing={4} mb={8}>
                    <Heading size="md">
                        Vertical Range Slider
                    </Heading>
                    <RangeSlider
                        aria-label={["min", "max"]}
                        colorScheme="purple"
                        defaultValue={[10, 30]}
                        orientation="vertical"
                        minH="32"
                    >
                        <RangeSliderTrack>
                            <RangeSliderFilledTrack />
                        </RangeSliderTrack>
                        <RangeSliderThumb index={0} />
                        <RangeSliderThumb index={1} />
                    </RangeSlider>
                    <Flex justify="space-between" w="full">
                        <Text>Min: 10</Text>
                        <Text>Max: 30</Text>
                    </Flex>
                </VStack>
                <VStack spacing={4} mb={8}>
                    <Heading size="md">
                        Custom Styled Range Slider
                    </Heading>
                    <RangeSlider
                        aria-label={["min", "max"]}
                        defaultValue={[30, 80]}>
                        <RangeSliderTrack bg="red.100">
                            <RangeSliderFilledTrack bg="tomato" />
                        </RangeSliderTrack>
                        <RangeSliderThumb boxSize={6} index={0}>
                            <Box color="tomato" />
                        </RangeSliderThumb>
                        <RangeSliderThumb boxSize={6} index={1}>
                            <Box color="tomato" />
                        </RangeSliderThumb>
                    </RangeSlider>
                    <Flex justify="space-between" w="full">
                        <Text>Min: 30</Text>
                        <Text>Max: 80</Text>
                    </Flex>
                </VStack>
                <VStack spacing={4} mb={8}>
                    <Heading size="md">
                        Discrete Range Slider
                    </Heading>
                    <RangeSlider
                        defaultValue={[120, 240]}
                        min={0}
                        max={300}
                        step={30}
                        colorScheme="orange"
                    >
                        <RangeSliderTrack bg="red.100">
                            <RangeSliderFilledTrack bg="tomato" />
                        </RangeSliderTrack>
                        <RangeSliderThumb boxSize={6} index={0} />
                        <RangeSliderThumb boxSize={6} index={1} />
                    </RangeSlider>
                    <Flex justify="space-between" w="full">
                        <Text>Min: 120</Text>
                        <Text>Max: 240</Text>
                    </Flex>
                </VStack>
            </Box>
        </ChakraProvider>
    );
}
export default App;

Step to run the Application:

npm start 

Output: Now go to http://localhost:3000 in your browser: