Custom handle doesn't work

[mvasin]

trafficstars

Custom handle doesn't seem to work.

Here's the code, also available on codesandbox:

import React from "react";
import ReactDOM from "react-dom";

import Slider from "rc-slider/lib/Slider";
import "rc-slider/assets/index.css";

const Handle = () => <span style={{fontSize: '3rem'}}>*</span>;

function App() {
  return (
    <div style={{ paddingTop: "30vh" }}>
      <Slider handle={Handle} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here's the experience so far:

[draperunner]

The handle prop is quite low-level. It expects you to implement the Handle functionality yourself on your custom Handle.

But, you can use the existing Handle component and pass your custom children to it:

import Slider, { Handle } from 'rc-slider'

<Slider
    handle={ (handleProps) => {
        return (
            <Handle { ...handleProps }>
                <MyAwesomeComponent />
            </Handle>
        )
    }}
 />

[cseas]

The code suggested by @draperunner works well. This issue can be closed now.