RangeSlider not responding on mobile

Description

Cant reproduce your code on my site.

Link to Reproduction

https://codesandbox.io/s/laughing-mirzakhani-wzx974?file=/pages/index.js

Steps to reproduce

Hi

I pasted your code from the Chakra UI site on my site. The slider works on desktop but not mobile, bit it work on both for you site. Why is this?

TIA

PS LOVE Chakra!

` import { RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb, } from ‘@chakra-ui/react’

export default function Range(){

return(
    <RangeSlider

aria-label={[‘min’, ‘max’]} colorScheme=‘pink’ defaultValue={[10, 30]}

<RangeSliderTrack> <RangeSliderFilledTrack /> </RangeSliderTrack> <RangeSliderThumb index={0} /> <RangeSliderThumb index={1} /> </RangeSlider> )

} `

Chakra UI Version

2.2.4

Browser

Google Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[segunadebayo]

Thanks for the detailed analysis @simonflk. This regression is on me and I’ve just pushed a fix for this. We’ll release an update shortly.

Reference: https://github.com/chakra-ui/chakra-ui/commit/7000bb5fe432db85ed41aeb0c5d488bbc7da4785

If the issue persists after upgrading, I’ll re-open it.

[simonflk]

I pasted your code from the Chakra UI site on my site. The slider works on desktop but not mobile, bit it work on both for you site. Why is this?

I saw the same thing happening yesterday, but today the chakra docs are broken - I’m guessing they just pushed out a docs update which picked up the new version.

I spent way too long trying to see why it appeared to work in the docs but not in my app