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

NameTypeDescription
stateRangeSliderStateAn object that contains all props defining the current state of a range slider.
actionsRangeSliderActionsAn object that contains all the functions that can be called to modify the range slider's value
getRootPropsPropGetterA function that takes range slider root props and handles changes for the range slider.
getTrackPropsPropGetterA function that takes range slider track props and handles changes for the range slider's track.
getInnerTrackPropsPropGetterA function that takes range slider inner track style props and handles changes in the range slider's inner track style.
getThumbPropsRequiredPropGetter<{ index: number }A function that takes the value of the slider thumb's index and handles changes for that range slider's thumb.
getMarkerPropsRequiredPropGetter<{ value: number }>A function that takes the value of the marker and handle changes for the slider's marker positioning and style.
getInputPropsRequiredPropGetter<{ index: number }>A function to get the props of the input field of one of the two possible inputs.
getOutputPropsPropGetterA 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>
      )
    }

Parameters#

The useRangeSlider hook accepts an object with the following properties:

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel