[EuiRange]: Add conditional aria-valuetext when ticks prop is passed

src/components/form/range/range.tsx

@@ -116,6 +116,20 @@ export class EuiRangeClass extends Component<
     });
   };
 
+  handleAriaValueNow = (currentVal: string | number): number | undefined => {
+    if (!currentVal) return;
+
+    let ariaValueNow;
+    let target = Number(currentVal); // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number#return_value
+
+    if (!Number.isNaN(target)) {
+      ariaValueNow = target;
+      return ariaValueNow;
+    }
+
+    return ariaValueNow; // undefined
+  };
+
   handleAriaValueText = (
     ticks: EuiRangeTick[],
     currentVal: string | number
@@ -245,6 +259,7 @@ export class EuiRangeClass extends Component<
             ariaValueText={
               ticks ? this.handleAriaValueText(ticks, value) : undefined
             }
+            ariaValueNow={this.handleAriaValueNow(value)}
             id={showInput ? undefined : id} // Attach id only to the input if there is one
             name={name}
             min={min}

src/components/form/range/range_slider.tsx

@@ -52,6 +52,7 @@ export interface EuiRangeSliderProps
   thumbColor?: EuiRangeLevel['color'];
   onResize: EuiResizeObserverProps['onResize'];
   ariaValueText?: string;
+  ariaValueNow?: number;
 }
 
 export const EuiRangeSlider: FunctionComponent<EuiRangeSliderProps> = ({
@@ -71,6 +72,7 @@ export const EuiRangeSlider: FunctionComponent<EuiRangeSliderProps> = ({
   thumbColor,
   onResize,
   ariaValueText,
+  ariaValueNow,
   ...rest
 }) => {
   const classes = classNames('euiRangeSlider', className);
@@ -97,6 +99,7 @@ export const EuiRangeSlider: FunctionComponent<EuiRangeSliderProps> = ({
       {(resizeRef) => (
         <input
           aria-valuetext={ariaValueText}
+          aria-valuenow={ariaValueNow}
           ref={resizeRef}
           type="range"
           id={id}