{
{
{
const idPrefix = htmlIdGenerator()();
+ const rangeID = htmlIdGenerator('range')();
const [checkboxes] = useState([
{
@@ -102,7 +103,7 @@ export default () => {
min={0}
max={100}
name="range"
- id="range"
+ id={rangeID}
showInput
compressed
value={value}
diff --git a/src-docs/src/views/form_compressed/form_horizontal.js b/src-docs/src/views/form_compressed/form_horizontal.js
index 06ed6c015a9..54b5934ec99 100644
--- a/src-docs/src/views/form_compressed/form_horizontal.js
+++ b/src-docs/src/views/form_compressed/form_horizontal.js
@@ -11,10 +11,13 @@ import {
EuiPanel,
} from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
+
export default () => {
const [isSwitchChecked, setIsSwitchChecked] = useState(false);
const [comboBoxSelectionOptions, setComboBoxSelectionOptions] = useState([]);
const [value, setValue] = useState('20');
+ const rangeID = htmlIdGenerator('range')();
const onRangeChange = (e) => {
setValue(e.target.value);
@@ -68,7 +71,7 @@ export default () => {
min={0}
max={100}
name="range"
- id="range"
+ id={rangeID}
showInput
compressed
value={value}