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: React.KeyboardEvent<HTMLDivElement>,
        thumbIndex: number,
      ) => {
        if (e.code === 'ArrowRight') actions.stepUp(thumbIndex, stepByNumber)
        else if (e.code === 'ArrowLeft') actions.stepDown(thumbIndex, stepByNumber)
        else if (thumbIndex === 0 && typeof onThumbKeyDownFirstIndex === 'function')
          onThumbKeyDownFirstIndex(e)
        else if (thumbIndex === 1 && typeof onThumbKeyDownSecondIndex === 'function')
          onThumbKeyDownSecondIndex(e)
      }
    
      return (
        <Box
          px={8}
          pt='15%'
        >
          <Flex
            flexDir='row'
            justifyContent='space-between'
          >
            <Instructions stepByNumber={stepByNumber} />
            <Actions
              actions={actions}
              min={defaultValue[0]}
              max={defaultValue[1]}
              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
                  key={index}
                  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>
      )
    }

Open Sandbox

Parameters#

The useRangeSlider hook accepts an object with the following properties:

Edit this page on GitHub