Handle id being sorted

[tobyclh]

Problem or feature description:

Hi, I am trying to create a slider with multiple handles each with their own colours.
I use the handle.id to assign the colour of the handles. However, I realize the handle id is not actually associated with the handle, but the value. This creates a "jump" when the user finish dragging the handle.

Steps to reproduce (for problems):

        <Slider
            rootStyle={{position:'relative', width: '80%', marginTop: '25px', marginLeft: '25px', marginRight: '25px'}}
            step={0.01}
            domain={[0, 10]} // [min, max]
            values={values} // slider values
            reversed={false}
            onChange={this.onChange}
        >
        <Rail>
          {({ getRailProps }) => <SliderRail getRailProps={getRailProps} />}
        </Rail>
        <Handles>
            {({ handles, activeHandleID, getHandleProps }) => (
            <div className="slider-handles">
                {handles.map((handle, id) => (
                <Handle 
                    className={handle.id}
                    key={handle.id}
                    handle={handle}
                    domain={[0, 10]}
                    color={colors[parseInt(handle.id.replace('$$-',''))]}
                    getHandleProps={getHandleProps}
                />
                ))
                }
            </div>
            )}
        </Handles>
        </Slider>

YouTube video showing the weird "jump" .

Versions (for problems):

React-Compound-Slider:

React:

Browser:

Operating System: