chakra-ui Number Slider does not work with mouse inputs in playground

[antpaw]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

chakra-ui

Version

6.x

Current Behavior

The number slider of charka-ui does not work inside the playground demo page.

You will see that the slider does not work with mouse-input. However it will work with arrow keys (keyboard input) or with modifying the formData directly in the <textarea>.

Expected Behavior

The slider should work with mouse inputs

Steps To Reproduce

1. checkout the rjsf-v6 branch
2. npm install
3. cd packages/playground/
4. npm start
5. open the Numbers tab and select chakra-ui theme

Environment

- OS: macOS 15
- Node: 22
- npm: 10

Anything else?

[heath-freenome]

@antpaw I'm looking at the chakra ui Slider docs and they have a very different implementation. Maybe you need to do something like what they have, breaking out the control into parts?

import { Slider } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [value, setValue] = useState([40])
  return (
    <Slider.Root
      maxW="200px"
      value={value}
      onValueChange={(e) => setValue(e.value)}
    >
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumbs />
      </Slider.Control>
    </Slider.Root>
  )
}

[antpaw]

@heath-freenome thank you for looking in to this, can you explain what you mean by "very different"
https://github.com/rjsf-team/react-jsonschema-form/blob/v6.0.0-beta.1/packages/chakra-ui/src/components/ui/slider.tsx#L32
compared to this?

I've already tried to simplify the environment by a lot, basically I've setup the demo, you are referring to, inside of the widget without connecting its out- or in-puts to the system, and still the issue was exactly the same. If that demo would work inside the widget I could get to a point where where its clear what parts are causing the bug. But I can not get a working example inside the playground iframe no matter how simple I make it. However, outside of the iframe (in the same playground) the slider works. It must be some setting or a provider / wrapper element that is causing it. I don't think its the usage of the slider itself.

[segunadebayo]

@antpaw you probably want to map the rjsf form props to those in Chakra v3

import { Slider } from "@chakra-ui/react"
import { useState } from "react"

const RjsfSlider = ({ onChange, value, defaultValue, ...rest }) => {
  return (
    <Slider.Root
      maxW="200px"
      value={value != null ? [value] : undefined}
      defaultValue={defaultValue != null ? [defaultValue] : undefined}
      onValueChange={(e) => onChange(e.value[0])}
      {...rest}
    >
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumbs />
      </Slider.Control>
    </Slider.Root>
  )
}

[antpaw]

@antpaw you probably want to map the rjsf form props to those in Chakra v3

@segunadebayo thank you for looking into this!
I've already tried to simplify the environment by a lot, basically I've setup an example inside of the widget without connecting its out- or in-puts to the system (using the code that you have provided, but not even connecting the props, example at the bottom), and still the issue was exactly the same. If that example would work inside the widget I could get to a point where it's clear what parts are causing the bug. But I can not get a working example inside the playground iframe no matter how simple I make it. However, outside of the iframe (in the same playground) the slider works. It must be some setting or a provider / wrapper element that is causing it. I don't think its the usage of the slider itself.

    <Slider.Root
      maxW="200px"
      defaultValue=[20]
    >
        ....

[heath-freenome]

@antpaw how can I help you resolve the issue?

[antpaw]

@heath-freenome It would be amazing if you could create a simple example of a working slider inside the playground iframe. This example does not have to be connected to the "form-system" it just has to work with mouse events. It also does not have to leave inside a "field" and can be moved outside of the <form>. That would prove that the bug is caused by some parent component. And we can begin to move this element down into the <form> step by step and than starting to connect it to the system and see where it starts to break

[heath-freenome]

@antpaw I'm pretty busy with work at the moment. Have you tried to see if it works inside of a codesandbox?