please export SliderRef

[alissaVrk]

so we can forwardRef properly

[nag-murali]

May be you can use this to create custom handle. ( "rc-slider": "^10.1.1" )

`import { forwardRef } from "react"

const RangeHandle = forwardRef(({ index, ...restProps }, ref) => {

const defaultHandleStyle = {
  position: 'absolute',
  top: '15%',
  zIndex: 1,
  backgroundColor: '#fff',
  border: '1px solid #ddd',
  borderRadius: '50%',
  width: '20px',
  height: '20px',
  cursor: 'pointer'
}
const handleStyle = {...defaultHandleStyle, ...restProps.props.style}
const handleTouchStart = e => {
  if (index !== 2 ) {
    return e.preventDefault()
  } else {
    return restProps.props.onTouchStart(e)
  }
}
const handleMouseDown = e => {
  if (index !== 2 ) {
    return e.preventDefault()
  } else {
    restProps.props.onMouseDown(e)
  }
}

return (
  <div
    ref={ref}
    {...restProps.props}
    onTouchStart={handleTouchStart}
    onMouseDown={handleMouseDown}
    style={handleStyle}

  />
)

})

const RangeSlider = () => {
const handleRender = (handleCreateprops, handleInstanceProps) => {
return <RangeHandle index={handleInstanceProps.index} {...handleCreateprops} />
}

return (
<Slider
min={0}
max={100}
range
count={2}
defaultValue={[25, 75, 10]}
handleRender={handleRender}
pushable={false}
keyboard={false}
allowCross={false}
/>
)
}

export default RangeSlider
`

[alissaVrk]

@nag-murali I was referring the type
right now I do
import RcSlider, { SliderProps, SliderRef } from 'rc-slider/lib/Slider';
importing internals feels wrong though.

the Slider component does have a ref property

[alissaVrk]

@yoyo837 thank you :)