Moving more than one step with custom OnChange

Greetings! I've tried over and over and I can't seem to find a way to do this.

This is my handleChange function

  private handleChange = (newValue: number) => {
        if (newValue !== null) {
            this.setState({
                signalValue: newValue
            });
        }
    };

This is the Slider component

<SliderWithTooltip
                            value={params.signalValue}
                            style={{width: params.width}} max={params.maxRange}
                            min={params.minRange}
                            onChange={this.handleChange}
                            onAfterChange={this.onHandleAfterChange}
                        />

And i have attached a cloudapp link showing how it behaves.

https://cl.ly/0e703a357b4f

Start by reproducing the reported behavior with SliderWithTooltip, the supplied handleChange function, and the onChange/onAfterChange props. Compare the received newValue values with the requested movement shown in the linked recording. Done means establishing the expected multi-step behavior and identifying whether the report describes a slider defect.