Chakra UI Form Slider

Chakra UI Form Slider is the component, where users can make numerical value sections from a range of values. Sliders increase the interaction of users with the application. In real-time, we can embed this Chakra UI Form Slider component in the Shopping application, where users can filter out the item prices by adjusting the prices in the slider. In this article, we will see the practical implementation of various Slider types provided by the Chakra UI Form Slider component.

Prerequisites:

• NPM and Node
• React
• ReactJS Chakra UI

Approach:

We have created various Chakra UI Form Sliders like Basic Slider, Slider having different colors, Vertical Orientation Slider, Customized Slider, Discrete Slider, Slider having custom labels and Marks, and Slider with Tooltip. Users can interact with these sliders by adjusting the values of each slider as per their requirements.

Steps to Create React Application And Installing Module:

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

npx create-react-app my-app

Step 2: After creating your project folder(i.e. my-app), 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 Slider.

Javascript

import React, { useState } from 'react';
import {
    ChakraProvider,
    Box,
    Slider,
    SliderTrack,
    SliderFilledTrack,
    SliderThumb,
    SliderMark,
    Tooltip,
    Heading,
} from '@chakra-ui/react';
function App() {
    const [sValue, set_S_Value] = useState(30);
    const slideFn = (value) => {
        set_S_Value(value);
    };
    return (
        <ChakraProvider>
            <Box p={10} textAlign="center">
                <Heading as="h1" color="green">
                    GeeksforGeeks
                </Heading>
                <Heading as="h3">
                    Chakra UI Form Slider Example
                </Heading>
                <p style=
                    {
                        {
                            color: 'blue'
                        }
                    }>
                    Basic Slider:
                </p>
                <Slider
                    aria-label="basic-slider"
                    defaultValue={30}
                    colorScheme="blue"
                    onChange={slideFn}>
                    <SliderTrack>
                        <SliderFilledTrack />
                    </SliderTrack>
                    <SliderThumb />
                </Slider>
                <p style=
                    {
                        {
                            color: 'pink'
                        }
                    }>
                    Slider with Different Color Scheme:
                </p>
                <Slider
                    aria-label="colorful-slider"
                    defaultValue={30}
                    colorScheme="pink"
                    onChange={slideFn}>
                    <SliderTrack>
                        <SliderFilledTrack />
                    </SliderTrack>
                    <SliderThumb />
                </Slider>
                <p style=
                    {
                        {
                            color: 'purple'
                        }
                    }>
                    Vertical Slider:
                </p>
                <Slider
                    aria-label="vertical-slider"
                    defaultValue={30}
                    orientation="vertical"
                    minH="200px"
                    onChange={slideFn}>
                    <SliderTrack>
                        <SliderFilledTrack />
                    </SliderTrack>
                    <SliderThumb />
                </Slider>
                <p style=
                    {
                        {
                            color: 'red'
                        }
                    }>
                    Customized Slider:
                </p>
                <Slider
                    aria-label="customized-slider"
                    defaultValue={30}
                    onChange={slideFn}>
                    <SliderTrack bg="red.100">
                        <SliderFilledTrack bg="tomato" />
                    </SliderTrack>
                    <SliderThumb boxSize={6}>
                        <Box color="tomato" fontSize="lg">
                            {sValue}%
                        </Box>
                    </SliderThumb>
                </Slider>
                <p style=
                    {
                        {
                            color: 'orange'
                        }
                    }>Discrete Slider:
                </p>
                <Slider
                    defaultValue={60}
                    min={0}
                    max={300}
                    step={30}
                    onChange={slideFn}>
                    <SliderTrack bg="red.100">
                        <SliderFilledTrack bg="tomato" />
                    </SliderTrack>
                    <SliderThumb boxSize={6} />
                </Slider>
                <p style=
                    {
                        {
                            color: 'green'
                        }
                    }>Slider with Custom Labels and Marks:
                </p>
                <SliderMarkExample />
                <p style=
                    {
                        {
                            color: 'teal'
                        }
                    }>Slider with Tooltip:
                </p>
                <SliderThumbWithTooltip />
            </Box>
        </ChakraProvider>
    );
}
function SliderMarkExample() {
    const [sliderValue, setSliderValue] = useState(50);

    const labelStyles = {
        mt: '2',
        ml: '-2.5',
        fontSize: 'sm',
    };
    return (
        <Box p={4} pt={6}>
            <Slider aria-label="custom-label-slider"
                onChange={(val) => setSliderValue(val)}>
                <SliderMark value={25} {...labelStyles}>
                    25%
                </SliderMark>
                <SliderMark value={50} {...labelStyles}>
                    50%
                </SliderMark>
                <SliderMark value={75} {...labelStyles}>
                    75%
                </SliderMark>
                <SliderMark
                    value={sliderValue}
                    textAlign="center"
                    bg="blue.500"
                    color="white"
                    mt="-10"
                    ml="-5"
                    w="12">
                    {sliderValue}%
                </SliderMark>
                <SliderTrack>
                    <SliderFilledTrack />
                </SliderTrack>
                <SliderThumb />
            </Slider>
        </Box>
    );
}
function SliderThumbWithTooltip() {
    const [sliderValue, setSliderValue] = useState(5);
    const [showTooltip, setShowTooltip] = useState(false);
    return (
        <Slider
            id="slider-with-tooltip"
            defaultValue={5}
            min={0}
            max={100}
            colorScheme="teal"
            onChange={(v) => setSliderValue(v)}
            onMouseEnter={() => setShowTooltip(true)}
            onMouseLeave={() => setShowTooltip(false)}>
            <SliderMark value={25} mt="1"
                ml="-2.5" fontSize="sm">
                25%
            </SliderMark>
            <SliderMark value={50} mt="1"
                ml="-2.5" fontSize="sm">
                50%
            </SliderMark>
            <SliderMark value={75} mt="1"
                ml="-2.5" fontSize="sm">
                75%
            </SliderMark>
            <SliderTrack>
                <SliderFilledTrack />
            </SliderTrack>
            <Tooltip
                hasArrow
                bg="teal.500"
                color="white"
                placement="top"
                isOpen={showTooltip}
                label={`${sliderValue}%`}>
                <SliderThumb />
            </Tooltip>
        </Slider>
    );
}
export default App;

Step to run the application:

npm start

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