feat: adds an id prop to the component, enhancing its accessibility (#1041)

Author: Mirrorgo

README.md

@@ -101,6 +101,7 @@ The following APIs are shared by Slider and Range.
 | className | string | `''` | Additional CSS class for the root DOM node |
 | min | number | `0` | The minimum value of the slider |
 | max | number | `100` | The maximum value of the slider |
+| id        | string  | `''`    | Unique identifier for the component, used for accessibility |
 | marks | `{number: ReactNode}` or`{number: { style, label }}` | `{}` | Marks on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains `style` and `label` properties. |
 | step | number or `null` | `1` | Value to be added or subtracted on each step the slider makes. Must be greater than zero, and `max` - `min` should be evenly divisible by the step value. <br /> When `marks` is not an empty object, `step` can be set to `null`, to make `marks` as steps. |
 | vertical | boolean | `false` | If vertical is `true`, the slider will be vertical. |

src/Slider.tsx

@@ -54,6 +54,8 @@ export interface SliderProps<ValueType = number | number[]> {
   classNames?: SliderClassNames;
   styles?: SliderStyles;
 
+  id?: string;
+
   // Status
   disabled?: boolean;
   keyboard?: boolean;
@@ -126,6 +128,8 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     classNames,
     styles,
 
+    id,
+
     // Status
     disabled = false,
     keyboard = true,
@@ -575,6 +579,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
         })}
         style={style}
         onMouseDown={onSliderMouseDown}
+        id={id}
       >
         <div
           className={cls(`${prefixCls}-rail`, classNames?.rail)}