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

// SPDX-License-Identifier: Apache-2.0

import React from "react";
import { faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Slider, { createSliderWithTooltip } from "rc-slider";
import "rc-slider/assets/index.css";

import {
  without,
  pathOr,
  NumberFormatterBuilder,
  emptyStateValue,
} from "../../utils/utils";

const Range = createSliderWithTooltip(Slider.Range);

let debounceHandler = setTimeout(() => {}, 500);

export default class FilterCard extends React.PureComponent {
  constructor(props) {
    super(props);
    const { values, min, max, type } = props.filter || { values: [] };
    let currentMin = 0;
    let currentMax = 0;
    if (type === "measure" || type === "number") {
      currentMin = min;
      currentMax = max;
      const value = values && values[0];
      if (value && value.includes(":")) {
        const res = this.handleMinMaxValue(value);
        currentMin = res.min;

/* eslint max-lines: 0 */
import React, { Component } from "react";
import PropTypes from "prop-types";
import Slider from "rc-slider";
import classNames from "classnames";
import manager from "../middleware/ChannelManager";
import { HistoGramComponent } from "../addons/HistoGram";
import InitialLoader from "../addons/InitialLoader";
import * as TYPES from "../middleware/constants";
import _ from "lodash";

const Range = Slider.Range;

const helper = require("../middleware/helper");

export default class RangeSlider extends Component {
	constructor(props) {
		super(props);
		const startThreshold = props.range.start ? props.range.start : 0;
		const endThreshold = props.range.end ? props.range.end : 5;
		const values = {};
		this.urlParams = props.URLParams ? helper.URLParams.get(props.componentId, false, true) : null;
		this.defaultSelected = this.urlParams !== null ? this.urlParams : props.defaultSelected;
		if (!this.defaultSelected) {
			this.defaultSelected = {
				start: startThreshold,
				end: endThreshold
			};

import React from 'react';
import PropTypes from 'prop-types';
import Slider from 'rc-slider';
import Datepicker from '../../student_profile/Datepicker';

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

class DateSlider extends React.Component {

  constructor(props) {
    super(props);
    this.state = {value: [this.props.rangeStart, this.props.rangeEnd]};
    this.onBeginningDateInput = (date) => {
      const newValue = [parseInt(moment.utc(date).format("X")), this.state.value[1]];
      this.setState({ value: newValue }, this.props.setDate(newValue));
    };
    this.onEndingDateInput = (date) => {
      const newValue = [this.state.value[0], parseInt(moment.utc(date).format("X"))];
      this.setState({ value: newValue }, this.props.setDate(newValue));
    };
    this.onSliderChange = (value) => {
      this.setState({value});

import React, {Component} from 'react';
import { observer } from 'mobx-react';
import {debounce} from 'throttle-debounce';

import Toggle from 'material-ui/Toggle';

require('rc-slider/assets/index.css');
require('rc-tooltip/assets/bootstrap.css');

const Slider = require('rc-slider');
const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);

@observer
export default class Filters extends Component {

  constructor(props) {
    super(props)
    this.state = {
      key: 0,
      node: {min: 0, max: 1},
      edge: {min: 0, max: 1}
    }
    this.handleNodeFilterSlider = this.handleNodeFilterSlider.bind(this);
    this.handleEdgeFilterSlider = this.handleEdgeFilterSlider.bind(this);
    this.handleHideOrphans = this.handleHideOrphans.bind(this);
  }

const {
    multiple,
    showTooltip,
    tooltipPlacement,
    tooltipFormatter,
    vertical,
    style,
    className,
    ...rest
  } = props;

  const expressionFn = tooltipFormatter
    ? value => new Function('', 'return ' + tooltipFormatter).bind(value)()
    : value => value;

  const Component = multiple ? BaseSlider.Range : BaseSlider;
  const RenderSlider = showTooltip
    ? createSliderWithTooltip(Component)
    : Component;

  const tooltipProps = {
    placement: tooltipPlacement,
  };

  return (

background-color: ${neutral300};
      }

      .rc-slider-handle:active,
      .rc-slider-handle:focus {
        border: none;
        ${shadow(6, neutral500)}
      }
    }
  `};
`;

const StyledSlider = styled(RcSlider)`
  ${customStyle}
`;
const StyledRange = styled(RcSlider.Range)`
  ${customStyle}
`;

const StyledTooltip = styled(Tooltip)`
  width: 100%;

  > div:first-child {
    left: ${tipPosition}%;
    top: -41px;
  }
`;

class Slider extends React.Component {
  constructor(props) {
    super(props);

import React from 'react';
import Tooltip from 'rc-tooltip';
import Slider from 'rc-slider';
import { connect } from 'react-redux';
import {
  setSimilarityAndSearch,
  setDisplayed
} from '../../actions/similarity-slider';

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

class SimilaritySlider extends React.Component {
  constructor(props) {
    super(props)
    this.setSimilarity = this.setSimilarity.bind(this)
    this.setDisplayed = this.setDisplayed.bind(this)
  }

  setSimilarity(val) {
    this.props.setSimilarityAndSearch(val)
  }

  setDisplayed(val) {
    this.props.setDisplayed(val)
  }

}

    .rc-slider-rail {
      background-color: ${Colors.BLACK[100]};
    }

    .rc-slider-track {
      background-color: ${Colors.BLACK[200]};
    }
  }
`;

const StyledSlider = styled(Slider)`
  ${customStyle}
`;
const StyledRange = styled(Slider.Range)`
  ${customStyle}
`;

const StyledTooltip = styled(Tooltip)`
  width: 100%;

  > div:first-child {
    top: -41px;
    left: ${({ value, min, max }) => {
      let half = value;

      if (typeof value === 'object') {
        const { from, to } = value;
        half = (to + from) / 2;
      }

import layerActions from 'actions/LayerActions';
import layerKeys from 'constants/LayerConstants';
import utils from 'utils/AppUtils';
import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import React, { Component, PropTypes } from 'react';
import Slider from 'rc-slider';
import {defaultColorTheme} from '../../config';

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

const lossOptions = [];

export default class LossControls extends Component {
  static contextTypes = {
    language: PropTypes.string.isRequired,
    map: PropTypes.object.isRequired,
    settings: PropTypes.object.isRequired
  };

  constructor(props) {
    super(props);

    this.state = {
      playing: false,
      sliderValue: [],

*    + Contributors (See AUTHORS)
 *  
 *  http://aikar.co
 *  http://starlis.com
 *  
 *  @license MIT
 *  
 */
require('rc-slider/dist/rc-slider.css');
import React from "react";
import TimingsChart from "./TimingsChart";
import Slider from "rc-slider"
import data from "../data";
import moment from "moment";

const Range = Slider.Range;
export default class HistorySelector extends React.PureComponent {
  constructor(props, ctx) {
    super(props, ctx);
    this.state = {
      dataReady: false
    };
    data.onReady(() => this.setState({dataReady: true}));
  }

  render() {
    if (!this.state.dataReady) {
      return <div>;
    }

    return (
      <div id="history-selector"></div></div>