useSlider

useSlider is a custom hook used to provide slider functionality, as well as state and focus management to custom slider components when using it.

Import#

import { useSlider } from '@chakra-ui/react'

Return value#

The useSlider hook returns the following props

Name	Type	Description
`state`	`SliderState`	An object that contains all the props that define the current state of the slider.
`actions`	`SliderActions`	An object that contains all the functions that can be called to modify the slider's value
`getRootProps`	`PropGetter`	A function that takes slider root props and handles changes for the slider.
`getTrackProps`	`PropGetter`	A function that takes slider track props and handles changes for the slider's track.
`getInnerTrackProps`	`PropGetter`	A function that takes slider inner track style props and handles changes in the slider's inner track style.
`getThumbProps`	`PropGetter`	A function that takes slider thumb props and handles changes for the slider's thumb.
`getMarkerProps`	`RequiredPropGetter<{ value: number }>`	A function that takes the value of the marker and handles changes for the slider's marker positioning and style.
`getInputProps`	`PropGetter`	A function to get the props of the input field.

Usage#

import { Badge, Box, Button, chakra, Flex, useSlider, Text } from "@chakra-ui/react";
import Actions from "./Actions";
import Instructions from "./Instructions";
type Props = {
    stepByNumber: number;
    stepToNumber: number;
};

export default function App({stepByNumber, stepToNumber}: Props) {
    const {
        state,
        actions,
        getInnerTrackProps,
        getInputProps,
        getMarkerProps,
        getRootProps,
        getThumbProps,
        getTrackProps
    } = useSlider({ min: 0, max: 100, stepByNumber, stepToNumber });

    const { onKeyDown: onThumbKeyDown, ...thumbProps } = getThumbProps();
    
    const markers = []

    for (let i = 1; i <= 3; i++) {
        markers.push(getMarkerProps({ value: i * 25 }))
    }
    
    return (
        <Box px={8} pt='15%'>
            <Flex flexDir="row" justifyContent="space-between">
                <Instructions stepByNumber={stepByNumber} />
                <Actions actions={actions} stepToNumber={stepToNumber} />
            </Flex>
            <chakra.div
                mt={2}
                cursor="pointer"
                w={{ base: "96%", lg: "98%" }}
                ml={{ base: "2%", lg: "1%" }}
                {...getRootProps()}
            >
                <input {...getInputProps()} hidden />
                {markers.map((markerProps, index) => {
                    const value = String((index + 1) * 25) + '%';
                    return (
                        <Badge
                            ml='-20px'
                            mt='25px'
                            fontSize='sm'
                            color='#542344'
                            {...markerProps}
                        >
                            {value}
                        </Badge>
                )})}
                <Box h="7px" bgColor="#EBF5EE" borderRadius="full" {...getTrackProps()}>
                    <Box
                        h="7px"
                        bgColor="teal.500"
                        borderRadius="full"
                        {...getInnerTrackProps()}
                    />
                </Box>
                <Box
                    top="1%"
                    boxSize={8}
                    bgColor="white"
                    boxShadow="lg"
                    border="1px solid teal"
                    borderRadius="full"
                    _focusVisible={{
                        outline: "none"
                    }}
                    onKeyDown={(e) => {
                        if (e.code === "ArrowRight") actions.stepUp(stepByNumber);
                        else if (e.code === "ArrowLeft") actions.stepDown(stepByNumber);
                        else onThumbKeyDown(e);
                    }}
                    {...thumbProps}
                >
                    <Flex w="100%" h="100%" alignItems="center" justifyContent="center">
                        <Text color="teal">{state.value}</Text>
                    </Flex>
                </Box>
            </chakra.div>
        </Box>
    );
};

Open Sandbox

Parameters#

The useSlider hook accepts an object with the following properties:

Edit this page on GitHub