How to use react-range - 5 common examples

onMouseDown={props.onMouseDown}
                                        onTouchStart={props.onTouchStart}
                                        style={{
                                            ...props.style,
                                            height: '60px',
                                            display: 'flex',
                                            width: '100%'
                                        }}
                                        >
                                        <div max="" style="{{">
                                            {children}
                                        </div>
                                        
                                    )}
                                    renderThumb={({ index, props, isDragged }) =&gt; (

export const InnerTrack = styled('div', props => {
  const {$theme, $value = [], $min, $max, $disabled} = props;
  const {colors, borders, sizing, direction} = $theme;
  const borderRadius = $theme.borders.useRoundedCorners ? borders.radius100 : 0;
  return {
    borderTopLeftRadius: borderRadius,
    borderTopRightRadius: borderRadius,
    borderBottomRightRadius: borderRadius,
    borderBottomLeftRadius: borderRadius,
    background: getTrackBackground({
      values: $value,
      colors:
        $value.length === 1
          ? [colors.primary, colors.mono400]
          : [colors.mono400, colors.primary, colors.mono400],
      min: $min || 0,
      max: $max || 0,
      rtl: direction === 'rtl',
    }),
    height: sizing.scale100,
    width: '100%',
    alignSelf: 'center',
    cursor: $disabled ? 'not-allowed' : 'inherit',
  };
});
InnerTrack.displayName = 'StyledInnerTrack';

renderTrack={({ props, children }) => (
                  <div style="{props.style}">
                    <div style="{{">
                      {children}
                    </div>
                  </div>
                )}
                renderThumb={({ index, props }) =&gt; (

renderTrack = ({ props, children }) => (
    <div>
      <div max="" style="{{">
        {children}
      </div>
    </div>
  )

const ThumbLabel = ({index, values, rangeRef, Component, ...props}) => {
  const [labelValue, style] = useThumbOverlap(rangeRef, values, index);
  return (
    
      {labelValue}
    
  );
};