useRangeSlider

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

Import#

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

Return value#

The useRangeSlider hook returns the following props

Name	Type	Description
`state`	`RangeSliderState`	An object that contains all props defining the current state of a range slider.
`actions`	`RangeSliderActions`	An object that contains all the functions that can be called to modify the range slider's value
`getRootProps`	`PropGetter`	A function that takes range slider root props and handles changes for the range slider.
`getTrackProps`	`PropGetter`	A function that takes range slider track props and handles changes for the range slider's track.
`getInnerTrackProps`	`PropGetter`	A function that takes range slider inner track style props and handles changes in the range slider's inner track style.
`getThumbProps`	`RequiredPropGetter<{ index: number }`	A function that takes the value of the slider thumb's index and handles changes for that range slider's thumb.
`getMarkerProps`	`RequiredPropGetter<{ value: number }>`	A function that takes the value of the marker and handle changes for the slider's marker positioning and style.
`getInputProps`	`RequiredPropGetter<{ index: number }>`	A function to get the props of the input field of one of the two possible inputs.
`getOutputProps`	`PropGetter`	A function to get the props of the input field.

Usage#

import { Badge, Box, chakra, Flex, useRangeSlider } from "@chakra-ui/react";
import Actions from "./Actions";
import Instructions from "./Instructions";
import Thumb from './Thumb';

type Props = {
    min: number;
    max: number;
    stepToNumber: number;
    stepToIndex: number;
    stepByNumber: number;
    defaultValue: [number, number];
    'aria-label': [string, string];
};

export default function App({ min, max, stepToNumber, stepToIndex, stepByNumber, defaultValue, ...rest}: Props) {
    const {
        state,
        actions,
        getInnerTrackProps,
        getInputProps,
        getMarkerProps,
        getRootProps,
        getThumbProps,
        getTrackProps,
    } = useRangeSlider(min, max, defaultValue, rest)

    const { onKeyDown: onThumbKeyDownFirstIndex, ...thumbPropsFirstIndex } =
        getThumbProps({
            index: 0,
        })

    const { onKeyDown: onThumbKeyDownSecondIndex, ...thumbPropsSecondIndex } =
        getThumbProps({
            index: 1,
        })

    const markers = Array.from({ length: 3 }, (_, i) => i + 1).map((i) =>
        getMarkerProps({ value: i * 25 })
    );

    const onKeyDownStepBy = (e, thumbIndex) => {
        if (e.code === 'ArrowRight') actions.stepUp(thumbIndex, stepByNumber)
        else if (e.code === 'ArrowLeft')
            actions.stepDown(thumbIndex, stepByNumber)
        else
            thumbIndex === 0
            ? onThumbKeyDownFirstIndex(e)
            : onThumbKeyDownSecondIndex(e)
    }
    
    return (
        <Box px={8} pt='15%'>
            <Flex flexDir='row' justifyContent='space-between'>
                <Instructions stepByNumber={stepByNumber}/>
                <Actions actions={actions} min={min} max={max} stepToIndex={stepToIndex} stepToNumber={stepToNumber} />
            </Flex>
            <chakra.div
                mt={2}
                cursor='pointer'
                w={{ base: '96%', lg: '98%' }}
                ml={{ base: '2%', lg: '1%' }}
                {...getRootProps()}
            >
                <input {...getInputProps({ index: 0 })} hidden />
                <input {...getInputProps({ index: 1 })} hidden />
                {markers.map((markerProps, index) => {
                    const value = String((index + 1) * 25) + '%'
                    return (
                        <Badge
                            ml='-18px'
                            mt='25px'
                            fontSize='sm'
                            color='black'
                            {...markerProps}
                        >
                            {value}
                        </Badge>
                    )
                })}
                <Box
                    h='7px'
                    bgColor='teal.100'
                    borderRadius='full'
                    {...getTrackProps()}
                >
                    <Box
                        h='7px'
                        bgColor='teal.500'
                        borderRadius='full'
                        {...getInnerTrackProps()}
                    />
                </Box>
                <Thumb 
                    value={state.value[0]} 
                    thumbIndex={0} 
                    thumbProps={thumbPropsFirstIndex} 
                    onKeyDownStepBy={onKeyDownStepBy}
                    bgColor='teal.500'
                />
                <Thumb 
                    value={state.value[1]} 
                    thumbIndex={1} 
                    thumbProps={thumbPropsSecondIndex} 
                    onKeyDownStepBy={onKeyDownStepBy}
                    bgColor='teal.500'
                />
            </chakra.div>
        </Box>
    );
};

Parameters#

The useRangeSlider hook accepts an object with the following properties:

Edit this page on GitHub