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

NameTypeDescription
stateSliderStateAn object that contains all the props that define the current state of the slider.
actionsSliderActionsAn object that contains all the functions that can be called to modify the slider's value
getRootPropsPropGetterA function that takes slider root props and handles changes for the slider.
getTrackPropsPropGetterA function that takes slider track props and handles changes for the slider's track.
getInnerTrackPropsPropGetterA function that takes slider inner track style props and handles changes in the slider's inner track style.
getThumbPropsPropGetterA function that takes slider thumb props and handles changes for the slider's thumb.
getMarkerPropsRequiredPropGetter<{ value: number }>A function that takes the value of the marker and handles changes for the slider's marker positioning and style.
getInputPropsPropGetterA 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>
    );
};

Parameters#

The useSlider hook accepts an object with the following properties:

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel