Slider: How to alter sliding values to a range of DateTime values

[scheung38]

Instead of integer values, how to alter to sliding range to be a range of DateTime range? Thanks

[TryingToImprove]

I don't think that you can replace the type of values, but you can create a new component which uses the slider.

class DateSlider extends React.Component {
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this);
    this.state = { currentDate: props.value || props.min };
  }

  handleChange(value) {
    const { min } = this.props;

    const nextCurrentDate = new Date(min.getTime());
    nextCurrentDate.setDate(value);

    const { onChange } = this.props;
    onChange(nextCurrentDate);

    this.setState(prevState => ({ currentDate: nextCurrentDate }));
  }

  render() {
    const { currentDate } = this.state;
    const { min, max } = this.props;

    const steps = Math.round((max - min) / (1000 * 60 * 60 * 24))
    const value = Math.round((currentDate - min) / (1000 * 60 * 60 * 24))

    return (
      <Slider max={steps} value={value} onChange={this.handleChange} />
    )
  }
}

Then you can use it like:

class App extends React.Component {
  constructor(props) {
    super(props)

    this.handleChange = this.handleChange.bind(this);

    this.state = { currentDate: null };
  }

  handleChange(value) {
    this.setState(prevState => ({ currentDate: value }));
  }

  render() {
    const { currentDate } = this.state;

    return (
      <div style={styles}>
        <DateSlider value={currentDate} onChange={this.handleChange} max={new Date(2017, 3, 1)} min={new Date(2017, 1, 1)} />

        {currentDate ? currentDate.toDateString() : "Move slider"}
      </div>
    )
  }
};

You can see a example here: https://codesandbox.io/s/w0w6xyon2w

[paranoidjk]

Slider is a abstract ui component, the api value is used to calculate percentage，so use integer is the best way.

I suggest you try @TryingToImprove suggestion.