fix range slider crash

Author: antpaw

packages/chakra-ui/src/RangeWidget/RangeWidget.tsx

@@ -26,19 +26,19 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   hideLabel,
   id,
 }: WidgetProps<T, S, F>) {
-  const sliderWidgetProps = { value, label, id, ...rangeSpec<S>(schema) };
-
-  const _onChange = ({ value }: SliderValueChangeDetails) => onChange(value === undefined ? options.emptyValue : value);
+  const _onChange = ({ value }: SliderValueChangeDetails) =>
+    onChange(value === undefined ? options.emptyValue : value[0]);
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
 
   return (
     <Field mb={1} label={labelValue(label, hideLabel || !label)}>
       <Slider
-        {...sliderWidgetProps}
+        {...rangeSpec<S>(schema)}
         id={id}
         name={id}
         disabled={disabled || readonly}
+        value={[value]}
         onValueChange={_onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}

packages/chakra-ui/src/components/ui/slider.tsx

@@ -3,7 +3,6 @@ import { Slider as ChakraSlider, HStack } from '@chakra-ui/react';
 
 export interface SliderProps extends ChakraSlider.RootProps {
   marks?: Array<number | { value: number; label: React.ReactNode }>;
-  label?: React.ReactNode;
   showValue?: boolean;
 }
 
@@ -17,7 +16,7 @@ export interface SliderProps extends ChakraSlider.RootProps {
  * @returns {JSX.Element} The rendered slider component.
  */
 export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(props, ref) {
-  const { marks: marksProp, label, showValue, ...rest } = props;
+  const { marks: marksProp, showValue, ...rest } = props;
   const value = props.defaultValue ?? props.value;
 
   const marks = marksProp?.map((mark) => {
@@ -30,11 +29,9 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(pr
   const hasMarkLabel = !!marks?.some((mark) => mark.label);
 
   return (
-    <ChakraSlider.Root ref={ref} thumbAlignment='center' {...rest}>
-      {label && !showValue && <ChakraSlider.Label>{label}</ChakraSlider.Label>}
-      {label && showValue && (
+    <ChakraSlider.Root ref={ref} width='200px' thumbAlignment='center' {...rest}>
+      {showValue && (
         <HStack justify='space-between'>
-          <ChakraSlider.Label>{label}</ChakraSlider.Label>
           <ChakraSlider.ValueText />
         </HStack>
       )}

packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap

@@ -5354,6 +5354,10 @@ exports[`single fields slider field 1`] = `
   margin-bottom: var(--chakra-spacing-1);
 }
 
+.emotion-3 {
+  width: 200px;
+}
+
 .emotion-8 {
   margin-top: var(--chakra-spacing-3);
 }
@@ -5383,18 +5387,21 @@ exports[`single fields slider field 1`] = `
           role="group"
         >
           <div
+            aria-describedby="root__error root__description root__help"
             className="chakra-slider__root emotion-3"
             data-orientation="horizontal"
             data-part="root"
             data-scope="slider"
             dir="ltr"
-            id="slider::r2k:"
+            id="slider:root"
+            onBlur={[Function]}
+            onFocus={[Function]}
             style={
               {
-                "--slider-range-end": "60%",
+                "--slider-range-end": "43.103448275862064%",
                 "--slider-range-start": "0%",
                 "--slider-thumb-height": undefined,
-                "--slider-thumb-offset-0": "40%",
+                "--slider-thumb-offset-0": "56.896551724137936%",
                 "--slider-thumb-transform": "translateX(-50%)",
                 "--slider-thumb-width": undefined,
               }
@@ -5406,7 +5413,7 @@ exports[`single fields slider field 1`] = `
               data-part="control"
               data-scope="slider"
               dir="ltr"
-              id="slider::r2k::control"
+              id="slider:root:control"
               onPointerDown={[Function]}
               style={
                 {
@@ -5423,7 +5430,7 @@ exports[`single fields slider field 1`] = `
                 data-part="track"
                 data-scope="slider"
                 dir="ltr"
-                id="slider::r2k::track"
+                id="slider:root:track"
                 style={
                   {
                     "position": "relative",
@@ -5436,7 +5443,7 @@ exports[`single fields slider field 1`] = `
                   data-part="range"
                   data-scope="slider"
                   dir="ltr"
-                  id="slider::r2k::range"
+                  id="slider:root:range"
                   style={
                     {
                       "left": "var(--slider-range-start)",
@@ -5447,19 +5454,19 @@ exports[`single fields slider field 1`] = `
                 />
               </div>
               <div
-                aria-labelledby="slider::r2k::label"
+                aria-labelledby="slider:root:label"
                 aria-orientation="horizontal"
                 aria-valuemax={100}
-                aria-valuemin={0}
-                aria-valuenow={40}
+                aria-valuemin={42}
+                aria-valuenow={75}
                 className="chakra-slider__thumb emotion-7"
                 data-index={0}
                 data-orientation="horizontal"
                 data-part="thumb"
                 data-scope="slider"
                 dir="ltr"
                 draggable={false}
-                id="slider::r2k::thumb:0"
+                id="slider:root:thumb:0"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onKeyDown={[Function]}
@@ -5476,9 +5483,10 @@ exports[`single fields slider field 1`] = `
                 tabIndex={0}
               >
                 <input
-                  defaultValue={40}
+                  defaultValue={75}
                   hidden={true}
-                  id="slider::r2k::input:0"
+                  id="slider:root:input:0"
+                  name="root"
                   type="text"
                 />
               </div>