Revert "[REVERT ME] issue repro"

This reverts commit 7206b15.

src-docs/src/views/range/range.tsx

@@ -1,48 +1,64 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState } from 'react';
 
-import { EuiRange, EuiAccordion } from '../../../../src/components';
+import { EuiRange, EuiRangeProps, EuiSpacer } from '../../../../src/components';
 
-// import { useGeneratedHtmlId } from '../../../../src/services';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
-  const [value, setValue] = useState(21);
-  const [active, setActive] = useState(false);
-
-  const range = useMemo(
-    () => (
-      <>
-        <div
-          style={{
-            display: active ? undefined : 'none',
-          }}
-        >
-          <EuiRange
-            value={value}
-            onChange={(e) => {
-              const range = e.currentTarget.value;
-              setValue(Number(range.trim()));
-            }}
-            max={100}
-            min={0}
-            showRange
-            showInput
-            fullWidth={false}
-            showTicks
-            tickInterval={25}
-          />
-        </div>
-      </>
-    ),
-    [active, value]
-  );
+  const [value, setValue] = useState('120');
+
+  const basicRangeId = useGeneratedHtmlId({ prefix: 'basicRange' });
+  const rangeWithShowValueId = useGeneratedHtmlId({
+    prefix: 'rangeWithShowValue',
+  });
+  const rangeWithValuePrependId = useGeneratedHtmlId({
+    prefix: 'rangeWithValuePrepend',
+  });
+
+  const onChange: EuiRangeProps['onChange'] = (e) => {
+    setValue(e.currentTarget.value);
+  };
 
   return (
-    <EuiAccordion
-      id="rangeTest"
-      buttonContent="Toggle accordion"
-      onToggle={() => setActive(!active)}
-    >
-      {range}
-    </EuiAccordion>
+    <>
+      <EuiRange
+        id={basicRangeId}
+        min={100}
+        max={200}
+        step={0.05}
+        value={value}
+        onChange={onChange}
+        showLabels
+        aria-label="An example of EuiRange with showLabels prop"
+      />
+
+      <EuiSpacer size="xl" />
+
+      <EuiRange
+        id={rangeWithShowValueId}
+        min={100}
+        max={200}
+        value={value}
+        onChange={onChange}
+        showLabels
+        showValue
+        aria-label="An example of EuiRange with showValue prop"
+      />
+
+      <EuiSpacer size="xl" />
+
+      <EuiRange
+        id={rangeWithValuePrependId}
+        min={100}
+        max={200}
+        value={value}
+        onChange={onChange}
+        showLabels
+        showRange
+        showValue
+        valuePrepend="100 - "
+        aria-label="An example of EuiRange with valuePrepend prop"
+      />
+    </>
   );
 };