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 :)