Component laden...
Laden
Bedankt! Ik zal
dit project zo snel mogelijk bijwerken.
dit project zo snel mogelijk bijwerken.
Oeps! Er ging iets mis bij het verzenden van het formulier.
Hoe Google-verificatie inschakelen
Facebook-verificatie inschakelen
Spotify verificatie inschakelen
Hoe Dribbble verificatie in te schakelen
Hoe de Github-authenticatie in te schakelen
Hoe LinkedIn verificatie inschakelen
Hoe wachtwoordloze aanmeldingen inschakelen
Hoe wachtwoordvalidatie configureren
Hoe wachtwoord tonen/verbergen
Werken met profielafbeeldingen
Hoe een wachtwoord vergeten-flow toevoegen
Werken met selectievakjes
Hoe prijstabellen configureren
Over het Stripe klantenportaal
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"1ce9f439-fc70-7db6-6f77-36547c746a9e","type":"FormWrapper","tag":"div","classes":["2b9372b6-9818-d7ac-ba9e-bef3a8dbea50"],"children":["1ce9f439-fc70-7db6-6f77-36547c746a9f","1ce9f439-fc70-7db6-6f77-36547c746aa7","1ce9f439-fc70-7db6-6f77-36547c746aaa"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746a9f","type":"FormForm","tag":"form","classes":["72d0afe6-76e6-8ca4-2b01-5b72337a588e"],"children":["094f4ef9-86fc-3c5a-56dc-05414db2c3b9","ae52c201-53fc-70a7-da80-c6b712856d15","fd234bdb-ba78-03cd-fa83-02c5690a3f10","58b5b843-e340-de42-6bf9-9f7ef677647b"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"094f4ef9-86fc-3c5a-56dc-05414db2c3b9","type":"FormTextInput","tag":"input","classes":[],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Price-Range","data-name":"Price Range","placeholder":"Example Text","type":"text","id":"Price-Range","disabled":false,"required":true},"xattr":[{"name":"ms-code-input","value":"range-slider"}],"form":{"name":"Price Range","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ae52c201-53fc-70a7-da80-c6b712856d15","type":"Block","tag":"div","classes":["ac31597f-5746-68c2-929b-d27c45f1fdb4"],"children":["5936368a-986a-3702-eef5-df1989f4f24d","e3fc3c16-3104-65a1-6fc7-2e183604978b"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"5936368a-986a-3702-eef5-df1989f4f24d","type":"Block","tag":"div","classes":["0cf69da6-0432-b3ce-d1eb-b65253b04981"],"children":["1ce9f439-fc70-7db6-6f77-36547c746aa0","1ce9f439-fc70-7db6-6f77-36547c746aa2"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aa0","type":"FormBlockLabel","tag":"label","classes":["b1cb8b07-7b6d-0eea-8e83-a421efc7bf53"],"children":["1ce9f439-fc70-7db6-6f77-36547c746aa1"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Price-From","id":""},"visibility":{"conditions":[]}}},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aa1","text":true,"v":"From ($)"},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aa2","type":"FormTextInput","tag":"input","classes":["745733ea-cdea-4c61-e4a4-398db4810330"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Price-From","data-name":"Price (From)","placeholder":"","type":"number","id":"Price-From","disabled":false,"required":false},"xattr":[{"name":"ms-code-input","value":"price-from"}],"form":{"name":"Price (From)","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e3fc3c16-3104-65a1-6fc7-2e183604978b","type":"Block","tag":"div","classes":["0cf69da6-0432-b3ce-d1eb-b65253b04981"],"children":["e3fc3c16-3104-65a1-6fc7-2e183604978c","e3fc3c16-3104-65a1-6fc7-2e183604978e"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e3fc3c16-3104-65a1-6fc7-2e183604978c","type":"FormBlockLabel","tag":"label","classes":["b1cb8b07-7b6d-0eea-8e83-a421efc7bf53"],"children":["e3fc3c16-3104-65a1-6fc7-2e183604978d"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Price-To","id":""},"visibility":{"conditions":[]}}},{"_id":"e3fc3c16-3104-65a1-6fc7-2e183604978d","text":true,"v":"To ($)"},{"_id":"e3fc3c16-3104-65a1-6fc7-2e183604978e","type":"FormTextInput","tag":"input","classes":["745733ea-cdea-4c61-e4a4-398db4810330"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Price-To","data-name":"Price (To)","placeholder":"","type":"number","id":"Price-To","disabled":false,"required":false},"xattr":[{"name":"ms-code-input","value":"price-to"}],"form":{"name":"Price (To)","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"fd234bdb-ba78-03cd-fa83-02c5690a3f10","type":"FormButton","tag":"input","classes":["a289c773-a23c-85c4-d6e2-68088d860233"],"children":[],"data":{"attr":{"type":"submit","value":"Search","data-wait":"Please wait...","id":""},"form":{"type":"button"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58b5b843-e340-de42-6bf9-9f7ef677647b","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<!-- 💙 MEMBERSCRIPT #58 v0.1 💙 RANGE SLIDER INPUT -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\"> </script>\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css\" />\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js\"></script>\n<style>\n .irs {\n font-family: inherit;\n }\n</style>\n<script>\n $(document).ready(function() {\n var rangeSlider = $('[ms-code-input=\"range-slider\"]');\n var priceFromInput = $('[ms-code-input=\"price-from\"]');\n var priceToInput = $('[ms-code-input=\"price-to\"]');\n \n // Set the default range values\n var defaultFrom = 20000;\n var defaultTo = 50000;\n\n rangeSlider.ionRangeSlider({\n skin: \"round\", // You can also try \"flat\", \"big\", \"modern\", \"sharp\", or \"square\". Default styles can be overridden with CSS.\n type: \"double\",\n grid: true,\n min: 0,\n max: 100000,\n from: defaultFrom,\n to: defaultTo,\n prefix: \"$\",\n onStart: function(data) {\n priceFromInput.val(data.from);\n priceToInput.val(data.to);\n },\n onChange: function(data) {\n priceFromInput.val(data.from);\n priceToInput.val(data.to);\n }\n });\n\n // Get the initial range values and update the inputs\n var initialRange = rangeSlider.data(\"ionRangeSlider\");\n var initialData = initialRange.result;\n priceFromInput.val(initialData.from);\n priceToInput.val(initialData.to);\n\n // Update the range slider and inputs when the inputs lose focus\n priceFromInput.on(\"blur\", function() {\n var value = $(this).val();\n var toValue = priceToInput.val();\n \n // Perform validation\n if (\n value < initialRange.options.min ||\n value > initialRange.options.max ||\n value >= toValue ||\n value > initialData.to // Check if fromValue is higher than the current toValue\n ) {\n value = defaultFrom;\n }\n\n rangeSlider.data(\"ionRangeSlider\").update({\n from: value\n });\n priceFromInput.val(value);\n });\n\n priceToInput.on(\"blur\", function() {\n var value = $(this).val();\n var fromValue = priceFromInput.val();\n \n // Perform validation\n if (\n value < initialRange.options.min ||\n value > initialRange.options.max ||\n value <= fromValue ||\n value < initialData.from // Check if toValue is lower than the current fromValue\n ) {\n value = defaultTo;\n }\n\n rangeSlider.data(\"ionRangeSlider\").update({\n to: value\n });\n priceToInput.val(value);\n });\n });\n</script>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<!-- 💙 MEMBERSCRIPT #58 v0.1 💙 RANGE SLIDER INPUT -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\"> </script>\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css\" />\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js\"></script>\n<style>\n .irs {\n font-family: inherit;\n }\n</style>\n<script>\n $(document).ready(function() {\n var rangeSlider = $('[ms-code-input=\"range-slider\"]');\n var priceFromInput = $('[ms-code-input=\"price-from\"]');\n var priceToInput = $('[ms-code-input=\"price-to\"]');\n \n // Set the default range values\n var defaultFrom = 20000;\n var defaultTo = 50000;\n\n rangeSlider.ionRangeSlider({\n skin: \"round\", // You can also try \"flat\", \"big\", \"modern\", \"sharp\", or \"square\". Default styles can be overridden with CSS.\n type: \"double\",\n grid: true,\n min: 0,\n max: 100000,\n from: defaultFrom,\n to: defaultTo,\n prefix: \"$\",\n onStart: function(data) {\n priceFromInput.val(data.from);\n priceToInput.val(data.to);\n },\n onChange: function(data) {\n priceFromInput.val(data.from);\n priceToInput.val(data.to);\n }\n });\n\n // Get the initial range values and update the inputs\n var initialRange = rangeSlider.data(\"ionRangeSlider\");\n var initialData = initialRange.result;\n priceFromInput.val(initialData.from);\n priceToInput.val(initialData.to);\n\n // Update the range slider and inputs when the inputs lose focus\n priceFromInput.on(\"blur\", function() {\n var value = $(this).val();\n var toValue = priceToInput.val();\n \n // Perform validation\n if (\n value < initialRange.options.min ||\n value > initialRange.options.max ||\n value >= toValue ||\n value > initialData.to // Check if fromValue is higher than the current toValue\n ) {\n value = defaultFrom;\n }\n\n rangeSlider.data(\"ionRangeSlider\").update({\n from: value\n });\n priceFromInput.val(value);\n });\n\n priceToInput.on(\"blur\", function() {\n var value = $(this).val();\n var fromValue = priceFromInput.val();\n \n // Perform validation\n if (\n value < initialRange.options.min ||\n value > initialRange.options.max ||\n value <= fromValue ||\n value < initialData.from // Check if toValue is lower than the current fromValue\n ) {\n value = defaultTo;\n }\n\n rangeSlider.data(\"ionRangeSlider\").update({\n to: value\n });\n priceToInput.val(value);\n });\n });\n</script>","div":false,"iframe":false,"script":true}},"insideRTE":false}},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aa7","type":"FormSuccessMessage","tag":"div","classes":["5b91f9bb-6729-b5e2-03ad-6c6fc64ed72a"],"children":["3bc0513b-f00c-78d3-7001-734b58d5046d"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d5046d","type":"Block","tag":"div","classes":["e9b7e8b4-3830-713a-81e0-62f7bcb29f00"],"children":["3bc0513b-f00c-78d3-7001-734b58d5046e","3bc0513b-f00c-78d3-7001-734b58d50472","3bc0513b-f00c-78d3-7001-734b58d50476"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d5046e","type":"Heading","tag":"h1","classes":["e9b7e8b4-3830-713a-81e0-62f7bcb29f01"],"children":["3bc0513b-f00c-78d3-7001-734b58d5046f","3bc0513b-f00c-78d3-7001-734b58d50471"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d5046f","type":"Strong","tag":"strong","classes":[],"children":["3bc0513b-f00c-78d3-7001-734b58d50470"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50470","text":true,"v":"Save these inputs"},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50471","text":true,"v":" to member profiles."},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50472","type":"Paragraph","tag":"p","classes":["e9b7e8b4-3830-713a-81e0-62f7bcb29f02"],"children":["3bc0513b-f00c-78d3-7001-734b58d50473","3bc0513b-f00c-78d3-7001-734b58d50474"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50473","text":true,"v":"With Memberstack, you can allow your members to save this data to their profile and reuse it at any time as a saved filter, or anything else."},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50474","type":"Strong","tag":"strong","classes":[],"children":["3bc0513b-f00c-78d3-7001-734b58d50475"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50475","text":true,"v":""},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50476","type":"Link","tag":"a","classes":["e9b7e8b4-3830-713a-81e0-62f7bcb29f03"],"children":["3bc0513b-f00c-78d3-7001-734b58d50477"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"https://app.memberstack.com/signup"}}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50477","text":true,"v":"Try Memberstack"},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aaa","type":"FormErrorMessage","tag":"div","classes":[],"children":["1ce9f439-fc70-7db6-6f77-36547c746aab"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aab","type":"Block","tag":"div","classes":[],"children":["1ce9f439-fc70-7db6-6f77-36547c746aac"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aac","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"a289c773-a23c-85c4-d6e2-68088d860233","fake":false,"type":"class","name":"submit","namespace":"","comb":"","styleLess":"margin-top: 10px; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: hsla(214.08, 100.00%, 49.02%, 1.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"e9b7e8b4-3830-713a-81e0-62f7bcb29f01","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; color: hsla(0, 0.00%, 100.00%, 1.00); font-weight: 400;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"2b9372b6-9818-d7ac-ba9e-bef3a8dbea50","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"max-width: 500px; margin-bottom: 0px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; border-top-style: solid; border-top-width: 1px; border-top-color: rgba(0, 0, 0, 0.1); border-right-style: solid; border-right-width: 1px; border-right-color: rgba(0, 0, 0, 0.1); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: rgba(0, 0, 0, 0.1); border-left-style: solid; border-left-width: 1px; border-left-color: rgba(0, 0, 0, 0.1); border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; background-color: hsla(0, 0.00%, 100.00%, 1.00); box-shadow: 0 5px 17px 0 rgba(0, 0, 0, 0.1);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"745733ea-cdea-4c61-e4a4-398db4810330","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"margin-bottom: 0px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 0.00%, 0.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 0.00%, 0.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 0.00%, 0.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 0.00%, 0.00); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: rgba(0, 0, 0, 0.1);","variants":{"main_focus":{"styleLess":"border-top-color: hsla(214.08, 100.00%, 49.02%, 1.00); border-right-color: hsla(214.08, 100.00%, 49.02%, 1.00); border-bottom-color: hsla(214.08, 100.00%, 49.02%, 1.00); border-left-color: hsla(214.08, 100.00%, 49.02%, 1.00);"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"e9b7e8b4-3830-713a-81e0-62f7bcb29f02","fake":false,"type":"class","name":"p","namespace":"","comb":"","styleLess":"color: hsla(0, 0.00%, 100.00%, 0.90); font-size: 16px; line-height: 1.7; font-weight: 300;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"b1cb8b07-7b6d-0eea-8e83-a421efc7bf53","fake":false,"type":"class","name":"label","namespace":"","comb":"","styleLess":"font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"72d0afe6-76e6-8ca4-2b01-5b72337a588e","fake":false,"type":"class","name":"form","namespace":"","comb":"","styleLess":"display: flex; flex-direction: column; grid-column-gap: 10px; grid-row-gap: 10px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"e9b7e8b4-3830-713a-81e0-62f7bcb29f03","fake":false,"type":"class","name":"button_white","namespace":"","comb":"","styleLess":"margin-top: 10px; padding-right: 20px; padding-left: 20px; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: hsla(208.00000000000003, 0.00%, 100.00%, 1.00); color: hsla(0, 0.00%, 5.10%, 1.00); font-weight: 600;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"5b91f9bb-6729-b5e2-03ad-6c6fc64ed72a","fake":false,"type":"class","name":"success","namespace":"","comb":"","styleLess":"padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-color: transparent; text-align: left;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"ac31597f-5746-68c2-929b-d27c45f1fdb4","fake":false,"type":"class","name":"form-row","namespace":"","comb":"","styleLess":"display: flex; justify-content: space-between; align-items: center; grid-column-gap: 10px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"e9b7e8b4-3830-713a-81e0-62f7bcb29f00","fake":false,"type":"class","name":"disclaimer-inner","namespace":"","comb":"","styleLess":"display: flex; width: 100%; margin-right: auto; margin-left: auto; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; flex-direction: column; justify-content: center; align-items: flex-start; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00);","variants":{"small":{"styleLess":"padding-right: 20px; padding-left: 20px;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0cf69da6-0432-b3ce-d1eb-b65253b04981","fake":false,"type":"class","name":"input-wrap","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Klonen in Webflow
Kopieer component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"1ce9f439-fc70-7db6-6f77-36547c746a9e","type":"FormWrapper","tag":"div","classes":["2b9372b6-9818-d7ac-ba9e-bef3a8dbea50"],"children":["1ce9f439-fc70-7db6-6f77-36547c746a9f","1ce9f439-fc70-7db6-6f77-36547c746aa7","1ce9f439-fc70-7db6-6f77-36547c746aaa"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746a9f","type":"FormForm","tag":"form","classes":["72d0afe6-76e6-8ca4-2b01-5b72337a588e"],"children":["094f4ef9-86fc-3c5a-56dc-05414db2c3b9","ae52c201-53fc-70a7-da80-c6b712856d15","fd234bdb-ba78-03cd-fa83-02c5690a3f10","58b5b843-e340-de42-6bf9-9f7ef677647b"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"094f4ef9-86fc-3c5a-56dc-05414db2c3b9","type":"FormTextInput","tag":"input","classes":[],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Price-Range","data-name":"Price Range","placeholder":"Example Text","type":"text","id":"Price-Range","disabled":false,"required":true},"xattr":[{"name":"ms-code-input","value":"range-slider"}],"form":{"name":"Price Range","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ae52c201-53fc-70a7-da80-c6b712856d15","type":"Block","tag":"div","classes":["ac31597f-5746-68c2-929b-d27c45f1fdb4"],"children":["5936368a-986a-3702-eef5-df1989f4f24d","e3fc3c16-3104-65a1-6fc7-2e183604978b"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"5936368a-986a-3702-eef5-df1989f4f24d","type":"Block","tag":"div","classes":["0cf69da6-0432-b3ce-d1eb-b65253b04981"],"children":["1ce9f439-fc70-7db6-6f77-36547c746aa0","1ce9f439-fc70-7db6-6f77-36547c746aa2"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aa0","type":"FormBlockLabel","tag":"label","classes":["b1cb8b07-7b6d-0eea-8e83-a421efc7bf53"],"children":["1ce9f439-fc70-7db6-6f77-36547c746aa1"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Price-From","id":""},"visibility":{"conditions":[]}}},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aa1","text":true,"v":"From ($)"},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aa2","type":"FormTextInput","tag":"input","classes":["745733ea-cdea-4c61-e4a4-398db4810330"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Price-From","data-name":"Price (From)","placeholder":"","type":"number","id":"Price-From","disabled":false,"required":false},"xattr":[{"name":"ms-code-input","value":"price-from"}],"form":{"name":"Price (From)","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e3fc3c16-3104-65a1-6fc7-2e183604978b","type":"Block","tag":"div","classes":["0cf69da6-0432-b3ce-d1eb-b65253b04981"],"children":["e3fc3c16-3104-65a1-6fc7-2e183604978c","e3fc3c16-3104-65a1-6fc7-2e183604978e"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e3fc3c16-3104-65a1-6fc7-2e183604978c","type":"FormBlockLabel","tag":"label","classes":["b1cb8b07-7b6d-0eea-8e83-a421efc7bf53"],"children":["e3fc3c16-3104-65a1-6fc7-2e183604978d"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Price-To","id":""},"visibility":{"conditions":[]}}},{"_id":"e3fc3c16-3104-65a1-6fc7-2e183604978d","text":true,"v":"To ($)"},{"_id":"e3fc3c16-3104-65a1-6fc7-2e183604978e","type":"FormTextInput","tag":"input","classes":["745733ea-cdea-4c61-e4a4-398db4810330"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Price-To","data-name":"Price (To)","placeholder":"","type":"number","id":"Price-To","disabled":false,"required":false},"xattr":[{"name":"ms-code-input","value":"price-to"}],"form":{"name":"Price (To)","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"fd234bdb-ba78-03cd-fa83-02c5690a3f10","type":"FormButton","tag":"input","classes":["a289c773-a23c-85c4-d6e2-68088d860233"],"children":[],"data":{"attr":{"type":"submit","value":"Search","data-wait":"Please wait...","id":""},"form":{"type":"button"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"58b5b843-e340-de42-6bf9-9f7ef677647b","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<!-- 💙 MEMBERSCRIPT #58 v0.1 💙 RANGE SLIDER INPUT -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\"> </script>\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css\" />\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js\"></script>\n<style>\n .irs {\n font-family: inherit;\n }\n</style>\n<script>\n $(document).ready(function() {\n var rangeSlider = $('[ms-code-input=\"range-slider\"]');\n var priceFromInput = $('[ms-code-input=\"price-from\"]');\n var priceToInput = $('[ms-code-input=\"price-to\"]');\n \n // Set the default range values\n var defaultFrom = 20000;\n var defaultTo = 50000;\n\n rangeSlider.ionRangeSlider({\n skin: \"round\", // You can also try \"flat\", \"big\", \"modern\", \"sharp\", or \"square\". Default styles can be overridden with CSS.\n type: \"double\",\n grid: true,\n min: 0,\n max: 100000,\n from: defaultFrom,\n to: defaultTo,\n prefix: \"$\",\n onStart: function(data) {\n priceFromInput.val(data.from);\n priceToInput.val(data.to);\n },\n onChange: function(data) {\n priceFromInput.val(data.from);\n priceToInput.val(data.to);\n }\n });\n\n // Get the initial range values and update the inputs\n var initialRange = rangeSlider.data(\"ionRangeSlider\");\n var initialData = initialRange.result;\n priceFromInput.val(initialData.from);\n priceToInput.val(initialData.to);\n\n // Update the range slider and inputs when the inputs lose focus\n priceFromInput.on(\"blur\", function() {\n var value = $(this).val();\n var toValue = priceToInput.val();\n \n // Perform validation\n if (\n value < initialRange.options.min ||\n value > initialRange.options.max ||\n value >= toValue ||\n value > initialData.to // Check if fromValue is higher than the current toValue\n ) {\n value = defaultFrom;\n }\n\n rangeSlider.data(\"ionRangeSlider\").update({\n from: value\n });\n priceFromInput.val(value);\n });\n\n priceToInput.on(\"blur\", function() {\n var value = $(this).val();\n var fromValue = priceFromInput.val();\n \n // Perform validation\n if (\n value < initialRange.options.min ||\n value > initialRange.options.max ||\n value <= fromValue ||\n value < initialData.from // Check if toValue is lower than the current fromValue\n ) {\n value = defaultTo;\n }\n\n rangeSlider.data(\"ionRangeSlider\").update({\n to: value\n });\n priceToInput.val(value);\n });\n });\n</script>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<!-- 💙 MEMBERSCRIPT #58 v0.1 💙 RANGE SLIDER INPUT -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\"> </script>\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css\" />\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js\"></script>\n<style>\n .irs {\n font-family: inherit;\n }\n</style>\n<script>\n $(document).ready(function() {\n var rangeSlider = $('[ms-code-input=\"range-slider\"]');\n var priceFromInput = $('[ms-code-input=\"price-from\"]');\n var priceToInput = $('[ms-code-input=\"price-to\"]');\n \n // Set the default range values\n var defaultFrom = 20000;\n var defaultTo = 50000;\n\n rangeSlider.ionRangeSlider({\n skin: \"round\", // You can also try \"flat\", \"big\", \"modern\", \"sharp\", or \"square\". Default styles can be overridden with CSS.\n type: \"double\",\n grid: true,\n min: 0,\n max: 100000,\n from: defaultFrom,\n to: defaultTo,\n prefix: \"$\",\n onStart: function(data) {\n priceFromInput.val(data.from);\n priceToInput.val(data.to);\n },\n onChange: function(data) {\n priceFromInput.val(data.from);\n priceToInput.val(data.to);\n }\n });\n\n // Get the initial range values and update the inputs\n var initialRange = rangeSlider.data(\"ionRangeSlider\");\n var initialData = initialRange.result;\n priceFromInput.val(initialData.from);\n priceToInput.val(initialData.to);\n\n // Update the range slider and inputs when the inputs lose focus\n priceFromInput.on(\"blur\", function() {\n var value = $(this).val();\n var toValue = priceToInput.val();\n \n // Perform validation\n if (\n value < initialRange.options.min ||\n value > initialRange.options.max ||\n value >= toValue ||\n value > initialData.to // Check if fromValue is higher than the current toValue\n ) {\n value = defaultFrom;\n }\n\n rangeSlider.data(\"ionRangeSlider\").update({\n from: value\n });\n priceFromInput.val(value);\n });\n\n priceToInput.on(\"blur\", function() {\n var value = $(this).val();\n var fromValue = priceFromInput.val();\n \n // Perform validation\n if (\n value < initialRange.options.min ||\n value > initialRange.options.max ||\n value <= fromValue ||\n value < initialData.from // Check if toValue is lower than the current fromValue\n ) {\n value = defaultTo;\n }\n\n rangeSlider.data(\"ionRangeSlider\").update({\n to: value\n });\n priceToInput.val(value);\n });\n });\n</script>","div":false,"iframe":false,"script":true}},"insideRTE":false}},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aa7","type":"FormSuccessMessage","tag":"div","classes":["5b91f9bb-6729-b5e2-03ad-6c6fc64ed72a"],"children":["3bc0513b-f00c-78d3-7001-734b58d5046d"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d5046d","type":"Block","tag":"div","classes":["e9b7e8b4-3830-713a-81e0-62f7bcb29f00"],"children":["3bc0513b-f00c-78d3-7001-734b58d5046e","3bc0513b-f00c-78d3-7001-734b58d50472","3bc0513b-f00c-78d3-7001-734b58d50476"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d5046e","type":"Heading","tag":"h1","classes":["e9b7e8b4-3830-713a-81e0-62f7bcb29f01"],"children":["3bc0513b-f00c-78d3-7001-734b58d5046f","3bc0513b-f00c-78d3-7001-734b58d50471"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d5046f","type":"Strong","tag":"strong","classes":[],"children":["3bc0513b-f00c-78d3-7001-734b58d50470"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50470","text":true,"v":"Save these inputs"},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50471","text":true,"v":" to member profiles."},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50472","type":"Paragraph","tag":"p","classes":["e9b7e8b4-3830-713a-81e0-62f7bcb29f02"],"children":["3bc0513b-f00c-78d3-7001-734b58d50473","3bc0513b-f00c-78d3-7001-734b58d50474"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50473","text":true,"v":"With Memberstack, you can allow your members to save this data to their profile and reuse it at any time as a saved filter, or anything else."},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50474","type":"Strong","tag":"strong","classes":[],"children":["3bc0513b-f00c-78d3-7001-734b58d50475"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50475","text":true,"v":""},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50476","type":"Link","tag":"a","classes":["e9b7e8b4-3830-713a-81e0-62f7bcb29f03"],"children":["3bc0513b-f00c-78d3-7001-734b58d50477"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"https://app.memberstack.com/signup"}}},{"_id":"3bc0513b-f00c-78d3-7001-734b58d50477","text":true,"v":"Try Memberstack"},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aaa","type":"FormErrorMessage","tag":"div","classes":[],"children":["1ce9f439-fc70-7db6-6f77-36547c746aab"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aab","type":"Block","tag":"div","classes":[],"children":["1ce9f439-fc70-7db6-6f77-36547c746aac"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1ce9f439-fc70-7db6-6f77-36547c746aac","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"a289c773-a23c-85c4-d6e2-68088d860233","fake":false,"type":"class","name":"submit","namespace":"","comb":"","styleLess":"margin-top: 10px; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: hsla(214.08, 100.00%, 49.02%, 1.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"e9b7e8b4-3830-713a-81e0-62f7bcb29f01","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; color: hsla(0, 0.00%, 100.00%, 1.00); font-weight: 400;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"2b9372b6-9818-d7ac-ba9e-bef3a8dbea50","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"max-width: 500px; margin-bottom: 0px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; border-top-style: solid; border-top-width: 1px; border-top-color: rgba(0, 0, 0, 0.1); border-right-style: solid; border-right-width: 1px; border-right-color: rgba(0, 0, 0, 0.1); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: rgba(0, 0, 0, 0.1); border-left-style: solid; border-left-width: 1px; border-left-color: rgba(0, 0, 0, 0.1); border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; background-color: hsla(0, 0.00%, 100.00%, 1.00); box-shadow: 0 5px 17px 0 rgba(0, 0, 0, 0.1);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"745733ea-cdea-4c61-e4a4-398db4810330","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"margin-bottom: 0px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 0.00%, 0.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 0.00%, 0.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 0.00%, 0.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 0.00%, 0.00); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: rgba(0, 0, 0, 0.1);","variants":{"main_focus":{"styleLess":"border-top-color: hsla(214.08, 100.00%, 49.02%, 1.00); border-right-color: hsla(214.08, 100.00%, 49.02%, 1.00); border-bottom-color: hsla(214.08, 100.00%, 49.02%, 1.00); border-left-color: hsla(214.08, 100.00%, 49.02%, 1.00);"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"e9b7e8b4-3830-713a-81e0-62f7bcb29f02","fake":false,"type":"class","name":"p","namespace":"","comb":"","styleLess":"color: hsla(0, 0.00%, 100.00%, 0.90); font-size: 16px; line-height: 1.7; font-weight: 300;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"b1cb8b07-7b6d-0eea-8e83-a421efc7bf53","fake":false,"type":"class","name":"label","namespace":"","comb":"","styleLess":"font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"72d0afe6-76e6-8ca4-2b01-5b72337a588e","fake":false,"type":"class","name":"form","namespace":"","comb":"","styleLess":"display: flex; flex-direction: column; grid-column-gap: 10px; grid-row-gap: 10px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"e9b7e8b4-3830-713a-81e0-62f7bcb29f03","fake":false,"type":"class","name":"button_white","namespace":"","comb":"","styleLess":"margin-top: 10px; padding-right: 20px; padding-left: 20px; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: hsla(208.00000000000003, 0.00%, 100.00%, 1.00); color: hsla(0, 0.00%, 5.10%, 1.00); font-weight: 600;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"5b91f9bb-6729-b5e2-03ad-6c6fc64ed72a","fake":false,"type":"class","name":"success","namespace":"","comb":"","styleLess":"padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-color: transparent; text-align: left;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"ac31597f-5746-68c2-929b-d27c45f1fdb4","fake":false,"type":"class","name":"form-row","namespace":"","comb":"","styleLess":"display: flex; justify-content: space-between; align-items: center; grid-column-gap: 10px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"e9b7e8b4-3830-713a-81e0-62f7bcb29f00","fake":false,"type":"class","name":"disclaimer-inner","namespace":"","comb":"","styleLess":"display: flex; width: 100%; margin-right: auto; margin-left: auto; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; flex-direction: column; justify-content: center; align-items: flex-start; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00);","variants":{"small":{"styleLess":"padding-right: 20px; padding-left: 20px;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0cf69da6-0432-b3ce-d1eb-b65253b04981","fake":false,"type":"class","name":"input-wrap","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser niet ondersteund. Gebruik
Chrome of Safari.
Chrome of Safari.
Over dit onderdeel
AI-gegenereerd
Beschrijving van onderdeel (gegenereerd door AI)
The Price Range Picker is a user-friendly component designed to allow users to select a price range using a slider interface. It includes input fields for precise price entry and a submit button for searching.
Belangrijkste kenmerken:
- Interactive price range slider with adjustable min and max values
- Input fields for manual price entry
- Responsive design suitable for various devices
- Success and error messages for form submission feedback
- Integration with Memberstack for saving user preferences
Ontwerpelementen:
- Modern and clean layout with rounded corners
- Color scheme featuring shades of blue and white
- Clear labels for input fields
- Hover and focus effects on input fields and buttons
Potentiële gebruikssituaties:
- E-commerce websites looking to enhance product filtering options
- Real estate platforms for property price searches
- Travel booking sites for budget range selection
- Event ticketing services allowing users to set price limits
- Subscription services offering tiered pricing plans
Conclusion: The Price Range Picker is a versatile and visually appealing component that enhances user experience by simplifying price selection, making it an excellent addition for various online platforms.
Bouwen
Begin met het bouwen van je dromen
Memberstack is 100% gratis totdat u klaar bent om te lanceren - dus waar wacht u nog op? Maak je eerste app en begin vandaag nog.