From 39c12f878a8693c2628bbd2b050bc23a93bcfcc4 Mon Sep 17 00:00:00 2001
From: Sami Korpela <sami.korpela@gofore.com>
Date: Mon, 29 Apr 2024 14:18:42 +0300
Subject: [PATCH] OPHJOD-292: Update id&name of the Slider's input

---
 lib/components/Slider/Slider.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/components/Slider/Slider.tsx b/lib/components/Slider/Slider.tsx
index 1c0adf0..82a66d8 100644
--- 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}