Component laden...

Laden

Meer onderdelen

Bekijk alles
Deel van

Price Range Picker

Oeps! Er ging iets mis bij het verzenden van het formulier.
Price Range Picker
{"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
CC Chrome of SS 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.