How to use the rc-slider.Handle function in rc-slider

SCALES_WITHOUT_LOG,
  DEFAULT_SCALE,
  DEFAULT_BREAKPOINTS,
  DEFAULT_START,
  DEFAULT_LOG_BREAKPOINTS,
  DEFAULT_ROTATIONS,
  DEFAULT_GAMMA,
  DEFAULT_LIGHTNESS,
  DEFAULT_NCOLORS,
  DEFAULT_NPREVIEWCOLORS,
  BUILTINS,
} from './constants.js';

import './ColorscalePicker.css';

const Handle = Slider.Handle;

export function getColorscale(
  colorscale,
  nSwatches,
  logBreakpoints,
  log,
  colorscaleType
) {
  /*
   * getColorscale() takes a scale, modifies it based on the input
   * parameters, and returns a new scale
   */
  // helper function repeats a categorical colorscale array N times
  let repeatArray = (array, n) => {
    let arrays = Array.apply(null, new Array(n));
    arrays = arrays.map(function() {

/* eslint-disable react/prop-types */

import 'rc-slider/assets/index.less';
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Tooltip from 'rc-tooltip';
import Slider from 'rc-slider';

const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);
const Handle = Slider.Handle;

const handle = (props) => {
  const { value, dragging, index, ...restProps } = props;
  return (
    
      
    
  );
};

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Slider, { Range } from 'rc-slider';
import Tooltip from 'rc-tooltip';
import { Button, Grid, Segment, Container, Statistic, Divider } from 'semantic-ui-react';
import uuidV4 from 'uuid/v4';
import styles from './Settings.css';
import ThumbGridPlaceholder from '../components/ThumbGridPlaceholder';

// const createSliderWithTooltip = Slider.createSliderWithTooltip;
// const Range = createSliderWithTooltip(Slider.Range);
const Handle = Slider.Handle;

let isManipulatingSlider = false;

const handle = (props) => {
  const { value, dragging, index, ...restProps } = props;
  return (
    
      
    
  );

/* eslint-disable react/prop-types */
import 'rc-slider/assets/index.css';
// import 'rc-tooltip/assets/bootstrap.css';
import React, {Component} from 'react';
import Slider, {Range} from 'rc-slider';
import PropTypes from 'prop-types';
//import {Button, Tooltip} from 'material-ui';
import Button from 'material-ui/Button';
import Tooltip from 'material-ui/Tooltip';

const createSliderWithTooltip = Slider.createSliderWithTooltip;
// const Range = createSliderWithTooltip(Slider.Range);
const Handle = Slider.Handle;

const handle = (tipFormatter) => ((props) => {
 const {index, ...restProps} = props;
  return (
    
  );
});
const tipFormatter = max => (value => `${value}/${max}`);

class SliderTooltip extends Component {
  state = {isHovered: false};
  handleChange = (isHovered) => (() => this.setState({isHovered: isHovered}));

import React from "react";
import _ from "underscore";
import classnames from "classnames";
import RCSlider from "rc-slider";
import Range from "visual/component/Controls/Range";

const RCHandle = RCSlider.Handle;

class RangeOptionType extends React.Component {
  static defaultProps = {
    className: "",
    attr: {},
    config: {
      range: {
        min: 0,
        max: 100,
        step: 1
      }
    },
    value: {
      startPointer: 0,
      finishPointer: 100,
      activePointer: "startPointer",

import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react';
import Tooltip from 'rc-tooltip';
import Slider from 'rc-slider';

const Handle = Slider.Handle;

const handle = (props) => {
  const { value, dragging, index, ...restProps } = props;
  return (
    
      
    
  );
};

defaultValue={this.props.data[0].y}
								onChange={this.onSlide.bind(this)}
								step={this.stepSize}
							/>
						
					
				
			

		)

	}

}

const Handle = Slider.Handle;

const handle = (props) => {
  const { value, dragging, index, ...restProps } = props;
  return (
    
      
    
  );
};

import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import * as d3 from 'd3';
import React, { Component } from 'react'
import Slider from 'rc-slider';
import { BackendAPI } from './API'; 
import ReactGA from 'react-ga';

const Handle = Slider.Handle;

export default class Histogram extends Component {

	constructor(props) {
		super(props);
		this.state = {
			min: 0,
			max: 1,
			selected: props.feature ? props.feature.threshold : 0,
			matched: 0,
			total: 0,
			points: []
		}
		this.w = 0;
		this.h = 0;
	}

import React from "react";
import _ from "underscore";
import classnames from "classnames";
import RCSlider from "rc-slider";
import Range from "visual/component/Controls/Range";

const RCHandle = RCSlider.Handle;

class RangeOptionType extends React.Component {
  static defaultProps = {
    className: "",
    attr: {},
    config: {
      range: {
        min: 0,
        max: 100,
        step: 1
      }
    },
    value: {
      startPointer: 0,
      finishPointer: 100,
      activePointer: "startPointer",

import React, { Component } from "react";
import withStyles from "elevate-ui/withStyles";
import Slider, { Range } from 'rc-slider';
import '../components/slider.css'
import ArrowIcon from '../images/icon-teal-roundarrow.png';
import EqualsIcon from '../images/icon-teal-equals.png';
import FormLeadgenCalc from '../components/FormLeadgenCalc';
import LeadsIcon from "../images/leads_icon.png";

const Handle = Slider.Handle;


class LeadgenCalc extends Component {
    constructor() {
        super();
        this.state = {
            numberOfLeads: 52,
            minLeads: 10,
            maxLeads: 200,
            minPrice: 750,
            maxPrice: 10000,
            startPrice: 1000,
            currentSpend: 1000,
            avgHomePrice: 200000,
            commissionPrct: 3,
            brokerFeesPrct: 0,