Slider: Range slider can only move by one step (even though it is being dragged across several steps)

[adflictusk]

Hi! I just want to troubleshoot about this problem that I have. The range slider i have implemented can only move by one step at a time, as seen in the gif (I pressed mouse down all the way while dragging).

Here's my code:

import React, { Component } from 'react'
import Slider from 'rc-slider'

import '../../../node_modules/rc-slider/assets/index.css'

class DoubleSlider extends Component {
    constructor (props) {
        super(props)
        this.state = {
            value: [0, 24]
        }
        this.onChange = this.onChange.bind(this)
        this.convertValueToTime = this.convertValueToTime.bind(this)
        this.formatTime = this.formatTime.bind(this)
    }

    onChange (newValue) {
        this.setState({ value: newValue }, function () {
            console.log(this.state.value)
        })
        console.log(newValue)
        this.props.onChangeTime(this.convertValueToTime(newValue))
    }

    convertValueToTime (value) {
        var time = []
        for (var i = 0; i < value.length; i++) {
            time.push(this.formatTime(value[i]))
        }
        return time
    }

    formatTime (num) {
        if (num < 10) {
            return ('0' + num + ':00')
        } else {
            return (num + ':00')
        }
    }

    render () {
        const timingMarks = {
            0: '00:01',
            6: '06:00',
            12: '12:00',
            18: '18:00',
            24: '24:00'
        }

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

        return (
            <Range
                className='DoubleSlider'
                min={0}
                max={24}
                marks={timingMarks}
                defaultValue={[0, 24]}
                value={this.state.value}
                onChange={(value) => this.onChange(value)}
                tipFormatter={(value) => this.formatTime(value)}
            />
        )
    }
}

export default DoubleSlider

console.log(this.state.value) and console.log(newValue) returns the same value at every step made. The slider could glide smoothly over several steps if value and onChange attributes are removed.

Thanks for your help!

[Robin-front]

why you create Range in render().

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

move to outside of the class.

[adflictusk]

Oh i see. Hahaha. It's working now! Thanks a lot! :)