How to use rc-slider - 10 common examples

// @flow
import React, { Component } from 'react';
import Typography from '@material-ui/core/Typography';
import 'rc-slider/assets/index.css';
import Slider, { createSliderWithTooltip } from 'rc-slider';
import { withStyles } from '@material-ui/core/styles';

const SliderWithTooltip = createSliderWithTooltip(Slider);

// need whiteSpace: 'pre' so it doesn't wrap. rc-slider's width was forcing them to be too small
const marginSlider = 24;
const marginButton = 8;
const styles = {
  leftText: {
    whiteSpace: 'pre',
    marginLeft: marginButton,
    marginRight: marginSlider,
  },
  rightText: {
    whiteSpace: 'pre',
    marginLeft: marginSlider,
    marginRight: marginButton,
  },
};

// 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
			};

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 * as React from 'react';
import * as ReactDOM from 'react-dom';
import Slider, { Range, Handle, createSliderWithTooltip } from 'rc-slider';

const SliderWithTooltip = createSliderWithTooltip(Slider);
const RangeWithTooltip = createSliderWithTooltip(Range);

ReactDOM.render(
    ,
    document.querySelector('.app')
);

ReactDOM.render(
    ,
    document.querySelector('.another-app')
);

Who robs cavefish of their sight?
Who rigs every Oscar night?`.split("\n");

const layouts = ["Pinterest", "Simple"];
const enterExitStyles = [
  "Simple",
  "Skew",
  "Newspaper",
  "Fold Up",
  "From Center",
  "From Left to Right",
  "From Top",
  "From Bottom"
];

const SliderWithTooltip = createSliderWithTooltip(Slider);

export default class extends Component {
  static defaultProps = {
    minItems: 10
  };

  constructor(props) {
    super(props);

    this.state = {
      data: this.generateData(),
      useCSS: false,
      responsive: false,
      layout: camelCase(layouts[0]),
      enterExitStyle: camelCase(enterExitStyles[0]),
      duration: 800,

tooltipFormatter,
    vertical,
    style,
    className,
    onChange,
    ...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,
  };

  const handleAfterChange = value => {
    onChange(value);
  };

  const sliderProps = omit(rest, ['value']);

  return (