Input Stepper (Increase & Decrease)

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"d4f09f92-ca90-c116-da77-f18affc45e40","type":"Block","tag":"div","classes":["726e125c-4942-4ef4-7497-3d94df4bfa32"],"children":["d4f09f92-ca90-c116-da77-f18affc45e46","71a6018d-97f2-304a-5a6f-0d34dfcb5d62","d6658468-d905-0d03-aabc-b5d0e9509062","d4f09f92-ca90-c116-da77-f18affc45e45"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"d4f09f92-ca90-c116-da77-f18affc45e46","type":"Block","tag":"div","classes":["1ddfc4f4-1e3c-2f44-3b35-713821f250af"],"children":["b57bbf45-99f8-5563-f636-cc572c9a51e0"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-step-button","value":"minus"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"b57bbf45-99f8-5563-f636-cc572c9a51e0","type":"HtmlEmbed","tag":"div","classes":["329b6031-48d2-29ed-b3a0-5c806d8a8810"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n  <path d=\"M12 8H4\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n  <path d=\"M12 8H4\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"71a6018d-97f2-304a-5a6f-0d34dfcb5d62","type":"FormTextInput","tag":"input","classes":["8e2755f2-1e70-9d3d-4b19-a5b2d14b0abb"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Number","data-name":"Number","placeholder":"1","type":"number","id":"Number","disabled":false,"required":false},"form":{"name":"Number","type":"input","passwordPage":false},"xattr":[{"name":"data-step-input","value":""}]}},{"_id":"d6658468-d905-0d03-aabc-b5d0e9509062","type":"Block","tag":"div","classes":["1ddfc4f4-1e3c-2f44-3b35-713821f250af"],"children":["b2f00a42-f7f5-49e7-c8d3-537099b39daf"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-step-button","value":"plus"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"b2f00a42-f7f5-49e7-c8d3-537099b39daf","type":"HtmlEmbed","tag":"div","classes":["329b6031-48d2-29ed-b3a0-5c806d8a8810"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n  <path d=\"M8 3V13M13 8H3\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n  <path d=\"M8 3V13M13 8H3\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"d4f09f92-ca90-c116-da77-f18affc45e45","type":"HtmlEmbed","tag":"div","classes":["a83fb99e-7057-cd42-aa61-004fdff40632"],"children":[],"v":"<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  // Get references to the input and buttons\n  const input = document.querySelector(\"[data-step-input]\");\n  const plusButton = document.querySelector('[data-step-button=\"plus\"]');\n  const minusButton = document.querySelector('[data-step-button=\"minus\"]');\n\n  // Set the initial opacity for the minus button\n  minusButton.style.opacity = \"0.7\";\n\n  plusButton.addEventListener(\"click\", () => {\n    // Parse the input value and use a fallback of 1 if it's not a valid number\n    const parsedValue = parseInt(input.value) || 1;\n\n    // Increase the input value by 1\n    input.value = parsedValue + 1;\n\n    // Update the opacity of the minus button\n    if (input.value > 1) {\n      minusButton.style.opacity = \"1\";\n    } else {\n      minusButton.style.opacity = \"0.7\";\n    }\n  });\n\n  minusButton.addEventListener(\"click\", () => {\n    // Parse the input value and use a fallback of 1 if it's not a valid number\n    const parsedValue = parseInt(input.value) || 1;\n\n    // Decrease the input value by 1, but not below 1\n    if (parsedValue > 1) {\n      input.value = parsedValue - 1;\n    }\n\n    // Update the opacity of the minus button\n    if (input.value > 1) {\n      minusButton.style.opacity = \"1\";\n    } else {\n      minusButton.style.opacity = \"0.7\";\n    }\n  });\n\n  // Prevent non-numeric input and handle input changes\n  input.addEventListener(\"input\", () => {\n    if (isNaN(input.value) || input.value < 1) {\n      input.value = 1;\n    }\n\n    // Update the opacity of the minus button\n    if (input.value > 1) {\n      minusButton.style.opacity = \"1\";\n    } else {\n      minusButton.style.opacity = \"0.7\";\n    }\n  });\n});\n\n</script>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  // Get references to the input and buttons\n  const input = document.querySelector(\"[data-step-input]\");\n  const plusButton = document.querySelector('[data-step-button=\"plus\"]');\n  const minusButton = document.querySelector('[data-step-button=\"minus\"]');\n\n  // Set the initial opacity for the minus button\n  minusButton.style.opacity = \"0.7\";\n\n  plusButton.addEventListener(\"click\", () => {\n    // Parse the input value and use a fallback of 1 if it's not a valid number\n    const parsedValue = parseInt(input.value) || 1;\n\n    // Increase the input value by 1\n    input.value = parsedValue + 1;\n\n    // Update the opacity of the minus button\n    if (input.value > 1) {\n      minusButton.style.opacity = \"1\";\n    } else {\n      minusButton.style.opacity = \"0.7\";\n    }\n  });\n\n  minusButton.addEventListener(\"click\", () => {\n    // Parse the input value and use a fallback of 1 if it's not a valid number\n    const parsedValue = parseInt(input.value) || 1;\n\n    // Decrease the input value by 1, but not below 1\n    if (parsedValue > 1) {\n      input.value = parsedValue - 1;\n    }\n\n    // Update the opacity of the minus button\n    if (input.value > 1) {\n      minusButton.style.opacity = \"1\";\n    } else {\n      minusButton.style.opacity = \"0.7\";\n    }\n  });\n\n  // Prevent non-numeric input and handle input changes\n  input.addEventListener(\"input\", () => {\n    if (isNaN(input.value) || input.value < 1) {\n      input.value = 1;\n    }\n\n    // Update the opacity of the minus button\n    if (input.value > 1) {\n      minusButton.style.opacity = \"1\";\n    } else {\n      minusButton.style.opacity = \"0.7\";\n    }\n  });\n});\n\n</script>","div":false,"iframe":false,"script":true,"compilable":false}}}}],"styles":[{"_id":"726e125c-4942-4ef4-7497-3d94df4bfa32","fake":false,"type":"class","name":"input-wrap","namespace":"","comb":"","styleLess":"display: flex; overflow: hidden; justify-content: center; align-items: center; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: hsla(0, 0.00%, 100.00%, 1.00);","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"1ddfc4f4-1e3c-2f44-3b35-713821f250af","fake":false,"type":"class","name":"step-button","namespace":"","comb":"","styleLess":"display: flex; min-height: 3rem; min-width: 3rem; justify-content: center; align-items: center; background-color: hsla(0, 0.00%, 96.00%, 1.00); line-height: 30px; cursor: pointer;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"329b6031-48d2-29ed-b3a0-5c806d8a8810","fake":false,"type":"class","name":"icon-embed-small","namespace":"","comb":"","styleLess":"width: 1.25rem; height: 1.25rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"8e2755f2-1e70-9d3d-4b19-a5b2d14b0abb","fake":false,"type":"class","name":"form-input-stepper","namespace":"","comb":"","styleLess":"width: 100%; height: auto; max-width: 5rem; min-height: 3rem; margin-bottom: 0px; padding-top: 0.5rem; padding-right: 0.75rem; padding-bottom: 0.5rem; padding-left: 0.75rem; border-top-style: none; border-top-width: 1px; border-top-color: black; border-right-style: none; border-right-width: 1px; border-right-color: black; border-bottom-style: none; border-bottom-width: 1px; border-bottom-color: black; border-left-style: none; border-left-width: 1px; border-left-color: black; background-color: hsla(0, 0.00%, 100.00%, 1.00); color: hsla(0, 0.00%, 0.00%, 1.00); font-size: 1rem; line-height: 1.6; text-decoration: none;","variants":{"main_placeholder":{"styleLess":"color: hsla(240, 0.00%, 0.00%, 0.60);"},"main_focus":{"styleLess":"border-top-color: hsla(208.00000000000003, 0.00%, 0.00%, 1.00); border-right-color: hsla(208.00000000000003, 0.00%, 0.00%, 1.00); border-bottom-color: hsla(208.00000000000003, 0.00%, 0.00%, 1.00); border-left-color: hsla(208.00000000000003, 0.00%, 0.00%, 1.00);"}},"children":["f4d68289-06d2-5596-1827-f0c87c4bf410","da78fd53-06af-564b-4a58-57b78f16d8ca"],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"a83fb99e-7057-cd42-aa61-004fdff40632","fake":false,"type":"class","name":"Don't Delete","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}