Addition of explicit value of sliders

src/components/inputs/accent-range.tsx

@@ -1,28 +1,75 @@
-import React from 'react';
+import React, {useState, useRef, useEffect} from 'react';
 import styled from 'styled-components';
 
 const Container = styled.span`
-  display: inline-block;
+  display: flex;
+  align-items: center;
   line-height: initial;
-  width: 200px;
+  width: 250px; // Increase the width
 `;
 
-const SliderInput = styled.input.attrs({type: 'range'})<any>`
+const SliderInput = styled.input.attrs({type: 'range'})`
   accent-color: var(--color_accent);
   width: 100%;
 `;
 
-export const AccentRange: React.FC<
-  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
-    onChange: (x: number) => void;
+const ValueDisplay = styled.span`
+  margin-right: 10px;
+  width: 50px; // Set a fixed width
+  text-align: right; // Align the text to the right
+  flex-shrink: 0; // Prevent it from shrinking
+`;
+
+interface AccentRangeProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'onChange' | 'type'
+  > {
+  onChange: (x: number) => void;
+  showingSliderValue?: boolean; // Make showSliderValue optional
+}
+
+export const AccentRange: React.FC<AccentRangeProps> = (props) => {
+  const {showingSliderValue = false} = props; // Default showSliderValue to false if not provided
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [sliderValue, setSliderValue] = useState<number>(0); // Initialize with 0
+
+  useEffect(() => {
+    if (inputRef.current) {
+      setSliderValue(+inputRef.current.value || 0); // Provide a default value
+    }
+  }, [props.value]);
+
+  if (!showingSliderValue) {
+    // Render original version without value display
+    return (
+      <Container>
+        <SliderInput
+          ref={inputRef}
+          {...props}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            const value = +e.target.value;
+            setSliderValue(value);
+            props.onChange?.(value);
+          }}
+        />
+      </Container>
+    );
   }
-> = (props) => (
-  <Container>
-    <SliderInput
-      {...props}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-        props.onChange && props.onChange(+e.target.value);
-      }}
-    />
-  </Container>
-);
+
+  // Render enhanced version with value display
+  return (
+    <Container>
+      <ValueDisplay>{sliderValue}</ValueDisplay>
+      <SliderInput
+        ref={inputRef}
+        {...props}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          const value = +e.target.value;
+          setSliderValue(value);
+          props.onChange?.(value);
+        }}
+      />
+    </Container>
+  );
+};

src/components/panes/configure-panes/custom/custom-control.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {useSelector} from 'react-redux';
 import {PelpiKeycodeInput} from '../../../inputs/pelpi/keycode-input';
 import {AccentButton} from '../../../inputs/accent-button';
 import {AccentSlider} from '../../../inputs/accent-slider';
@@ -10,6 +11,7 @@ import type {LightingData} from '../../../../types/types';
 import {ArrayColorPicker} from '../../../inputs/color-picker';
 import {ConnectedColorPalettePicker} from 'src/components/inputs/color-palette-picker';
 import {shiftFrom16Bit, shiftTo16Bit} from 'src/utils/keyboard-api';
+import {getShowSliderValue} from 'src/store/settingsSlice';
 
 type Props = {
   lightingData: LightingData;
@@ -28,29 +30,35 @@ type ControlMeta = [
 type AdvancedControlProps = Props & {meta: ControlMeta};
 
 export const VIACustomItem = React.memo(
-  (props: VIACustomControlProps & {_id: string}) => (
-    <ControlRow id={props._id}>
-      <Label>{props.label}</Label>
-      <Detail>
-        {'type' in props ? (
-          <VIACustomControl
-            {...props}
-            value={props.value && Array.from(props.value)}
-          />
-        ) : (
-          props.content
-        )}
-      </Detail>
-    </ControlRow>
-  ),
+  (props: VIACustomControlProps & {_id: string}) => {
+    const showSliderValue = useSelector(getShowSliderValue);
+
+    return (
+      <ControlRow id={props._id}>
+        <Label>{props.label}</Label>
+        <Detail>
+          {'type' in props ? (
+            <VIACustomControl
+              {...props}
+              value={props.value && Array.from(props.value)}
+              showSliderValue={showSliderValue}
+            />
+          ) : (
+            props.content
+          )}
+        </Detail>
+      </ControlRow>
+    );
+  },
 );
 
 type ControlGetSet = {
   value: number[];
   updateValue: (name: string, ...command: number[]) => void;
 };
 
-type VIACustomControlProps = VIAItem & ControlGetSet;
+type VIACustomControlProps = VIAItem &
+  ControlGetSet & {label: string; showSliderValue: boolean};
 
 const boxOrArr = <N extends any>(elem: N | N[]) =>
   Array.isArray(elem) ? elem : [elem];
@@ -76,17 +84,17 @@ const getRangeBytes = (value: number, max: number) => {
 };
 
 const VIACustomControl = (props: VIACustomControlProps) => {
-  const {content, type, options, value} = props as any;
+  const {content, type, options, value, showSliderValue} = props as any;
   const [name, ...command] = content;
   switch (type) {
     case 'button': {
       const buttonOption: any[] = options || [1];
       return (
         <AccentButton
-          onClick={() => 
-            props.updateValue(name, ...command, buttonOption[0])
-          }
-        >Click</AccentButton>
+          onClick={() => props.updateValue(name, ...command, buttonOption[0])}
+        >
+          Click
+        </AccentButton>
       );
     }
     case 'range': {
@@ -102,6 +110,7 @@ const VIACustomControl = (props: VIACustomControlProps) => {
               ...getRangeBytes(val, options[1]),
             )
           }
+          showingSliderValue={showSliderValue}
         />
       );
     }

src/components/panes/settings.tsx

@@ -18,6 +18,8 @@ import {
   getShowDesignTab,
   getDisableFastRemap,
   toggleCreatorMode,
+  getShowSliderValue,
+  toggleShowSliderValue,
   toggleFastRemap,
   getThemeMode,
   toggleThemeMode,
@@ -57,6 +59,7 @@ export const Settings = () => {
   const dispatch = useDispatch();
   const showDesignTab = useAppSelector(getShowDesignTab);
   const disableFastRemap = useAppSelector(getDisableFastRemap);
+  const ShowSliderValue = useAppSelector(getShowSliderValue);
   const themeMode = useAppSelector(getThemeMode);
   const themeName = useAppSelector(getThemeName);
   const renderMode = useAppSelector(getRenderMode);
@@ -120,6 +123,15 @@ export const Settings = () => {
                 />
               </Detail>
             </ControlRow>
+            <ControlRow>
+              <Label>Show explicit value for sliders</Label>
+              <Detail>
+                <AccentSlider
+                  onChange={() => dispatch(toggleShowSliderValue())}
+                  isChecked={ShowSliderValue}
+                />
+              </Detail>
+            </ControlRow>
             <ControlRow>
               <Label>Light Mode</Label>
               <Detail>

src/store/settingsSlice.ts

@@ -45,6 +45,9 @@ const settingsSlice = createSlice({
     toggleCreatorMode: (state) => {
       toggleBool(state, 'showDesignTab');
     },
+    toggleShowSliderValue: (state) => {
+      toggleBool(state, 'showSliderValue');
+    },
     toggleThemeMode: (state) => {
       const newThemeMode = state.themeMode === 'light' ? 'dark' : 'light';
       document.documentElement.dataset.themeMode = newThemeMode;
@@ -104,6 +107,7 @@ const settingsSlice = createSlice({
 export const {
   toggleFastRemap,
   toggleCreatorMode,
+  toggleShowSliderValue,
   setTestMatrixEnabled,
   setTestKeyboardSoundsSettings,
   setMacroEditorSettings,
@@ -125,6 +129,8 @@ export const getDisableFastRemap = (state: RootState) =>
   state.settings.disableFastRemap;
 export const getShowDesignTab = (state: RootState) =>
   state.settings.showDesignTab;
+export const getShowSliderValue = (state: RootState) =>
+  state.settings.showSliderValue;
 export const getRestartRequired = (state: RootState) =>
   state.settings.restartRequired;
 export const getIsTestMatrixEnabled = (state: RootState) =>

src/types/types.ts

@@ -84,6 +84,7 @@ export type TestKeyboardSoundsSettings = {
 export type Settings = {
   showDesignTab: boolean;
   disableFastRemap: boolean;
+  showSliderValue: boolean;
   renderMode: '3D' | '2D';
   themeMode: 'light' | 'dark';
   themeName: string;

src/utils/device-store.ts

@@ -31,6 +31,7 @@ const defaultStoreData = {
   settings: {
     showDesignTab: false,
     disableFastRemap: false,
+    showSliderValue: false,
     renderMode: '2D' as const,
     themeMode: 'dark' as const,
     designDefinitionVersion: 'v3' as const,