OPHJOD-292: Update id&name of the Slider's input

Opetushallitus · Apr 29, 2024 · 39c12f8 · 39c12f8
1 parent 57c1e22
commit 39c12f8
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/lib/components/Slider/Slider.tsx b/lib/components/Slider/Slider.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useId, useRef, useState } from 'react';
 import {
   Slider as ArkSlider,
   SliderValueChangeDetails as ArkValueChangeDetails,
@@ -50,6 +50,7 @@ const getThumbBackgroundColor = (focused: boolean, value: number) => {
 };
 
 export const Slider = ({ label, icon, onValueChange, value }: SliderProps) => {
+  const inputId = useId();
   const [focused, setFocused] = useState(false);
   const arrowRef = useRef(null);
   const { refs, floatingStyles, context } = useFloating({
@@ -94,6 +95,8 @@ export const Slider = ({ label, icon, onValueChange, value }: SliderProps) => {
         <span className="flex items-center justify-center text-[37px]">{icon}</span>
       </span>
       <ArkSlider.Root
+        id={inputId}
+        name={`slider-${inputId}`}
         className="ml-3 mr-5 flex grow flex-col justify-center"
         onValueChange={onValueChangeHandler}
         onFocusChange={onFocusChangeHandler}