the function onChangeComplete run two times

[qqstt]

No description provided.

[aaaronMF]

I found that if I click the slider, without moving the slider thumb (so not changing the value), onChangeComplete will get called three times

[av-k]

Manual fix (hack) for fix case:

import React, { Component } from 'react'
import Slider from 'react-rangeslider'

class Horizontal extends Component {
  constructor (props, context) {
    super(props, context)
    this.timer = null;
    this.state = {
      delay: props.delay || 100
      value: 10
    }
  }

  handleChangeStart = () => {
    console.log('Change event started');
  };

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

   /**
    * Here we use timer for fix
    */
  handleChangeComplete = () => {
      const {onComplete = () => {}} = this.props;
      const {value, delay} = this.state;

      clearTimeout(this.timer);
      this.timer = setTimeout(function() {
         // once
         onComplete({value});
      }, 100);
  };

  render () {
    const { value } = this.state
    return (
      <div className='slider'>
        <Slider
          min={0}
          max={100}
          value={value}
          onChangeStart={this.handleChangeStart}
          onChange={this.handleChange}
          onChangeComplete={this.handleChangeComplete}
        />
        <div className='value'>{value}</div>
      </div>
    )
  }
}

export default Horizontal

[ghost]

I have the same problem. Thanks for the hack which works but I don't think this is a good long-term solution.

I noticed that the problem only occurs on touch devices like iPad. For me the bug doesn't happen on my desktop computer. Therefore I assume this has something to do with the all so well known ghost-click issue on mobile devices.

[maksimovicdanijel]

I can confirm that this issue is happening on Edge/ IE 11 browsers as well.

[tagyoureit]

I see the same behavior but I think it has to do with moving the mouse/finger only a few pixels which is technically a change but less than the amount of pixels required to change the actual value.

  handleChange = value => {
  if (this.state.value!==value) {
      this.setState({
        value
      });
    };
}

Easy and no timer required.