Form range picker 1
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"cdcbca6d-bec5-6079-9a90-8d1fef3d4641","type":"Block","meta":{"displayName":"Form range picker"},"tag":"div","classes":["01910bd6-c336-5189-cf0f-71568d93844c"],"children":["427a8df8-68cf-cf3d-036a-3983691dec28"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"427a8df8-68cf-cf3d-036a-3983691dec28","type":"Block","tag":"div","classes":["2e561486-8717-c3e1-c94b-2f60e45f8939"],"children":["0bdd9f6f-0790-273e-14d3-40ae05d14121"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0bdd9f6f-0790-273e-14d3-40ae05d14121","type":"Block","tag":"div","classes":["5eeb7aa6-eb24-a583-d29d-d231e90b4c6f"],"children":["e625c561-22c1-f7e1-feff-774afc494cbb"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"e625c561-22c1-f7e1-feff-774afc494cbb","type":"Block","tag":"div","classes":["be493314-70c0-58af-e646-ecdad756c36e"],"children":["437b7409-acb6-a05c-fd85-a730afbc9241"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"437b7409-acb6-a05c-fd85-a730afbc9241","type":"Block","tag":"div","classes":["30e35f4a-4769-6d57-8a39-760e31e2589e"],"children":["ac9ebf53-12b2-e1bb-242a-f30d22a9424d","4392680f-fc82-04ef-3eb4-54067ead23b5"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ac9ebf53-12b2-e1bb-242a-f30d22a9424d","type":"Block","tag":"div","classes":["30e35f4a-4769-6d57-8a39-760e31e258a4"],"children":["45106042-1327-5ca8-ecd6-22272c4128ad"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"45106042-1327-5ca8-ecd6-22272c4128ad","type":"Block","tag":"div","classes":["30e35f4a-4769-6d57-8a39-760e31e2589e","90705d1f-1425-92ed-8b78-e004484ff189"],"children":["cc4c4003-ae23-9a03-aeab-d982650ccd69"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"cc4c4003-ae23-9a03-aeab-d982650ccd69","type":"Heading","tag":"h3","classes":["a0dedb4b-352a-5c52-0822-4d1fe7d27844"],"children":["4ab44d4f-249c-70d7-7207-053a1a018ade"],"data":{"tag":"h3","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"4ab44d4f-249c-70d7-7207-053a1a018ade","text":true,"v":"Range picker"},{"_id":"4392680f-fc82-04ef-3eb4-54067ead23b5","type":"FormWrapper","tag":"div","classes":["5589006a-4fc6-b79c-4815-bcd789461933"],"children":["966a972d-9ae0-acea-a389-9de09fb17129","bf83b0ab-e5b5-a0fd-350b-0f6af39cb2b0","18b51576-0589-2513-3447-be4b08933be1"],"data":{"search":{"exclude":true},"form":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"966a972d-9ae0-acea-a389-9de09fb17129","type":"FormForm","tag":"form","classes":["7c4f0fb8-2445-b23c-7c09-1b4ecd39bc3e"],"children":["19625d23-876c-e32a-e693-ac61efdc4598","31c33530-a1a5-31f8-ac0a-00a3d3615ef3"],"data":{"Source":{"tag":"Default form","val":{}},"form":{"type":"form","name":"Email Form"},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"","method":"get"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"19625d23-876c-e32a-e693-ac61efdc4598","type":"FormTextInput","tag":"input","classes":["ecde0205-5afe-c4ee-be2c-39daacc5cbad"],"children":[],"data":{"form":{"name":"Price Range","type":"input","passwordPage":false},"attr":{"id":"Price-Range","name":"Price-Range","maxlength":256,"data-name":"Price Range","placeholder":"Example Text","disabled":false,"type":"text","required":true,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"range-input","value":"range-slider"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"31c33530-a1a5-31f8-ac0a-00a3d3615ef3","type":"Block","tag":"div","classes":["7c4f0fb8-2445-b23c-7c09-1b4ecd39bc41"],"children":["5ff56770-9f9e-b498-9121-91b450447695","357ea460-3b35-c87d-7592-ed51da9527df"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5ff56770-9f9e-b498-9121-91b450447695","type":"Block","tag":"div","classes":["7c4f0fb8-2445-b23c-7c09-1b4ecd39bc43"],"children":["fd1df2d8-f024-64d1-9d48-bfc2bd11eb2e","4360f579-54ef-c883-779b-75db9c9ec8e9"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"fd1df2d8-f024-64d1-9d48-bfc2bd11eb2e","type":"FormBlockLabel","tag":"label","classes":["7c4f0fb8-2445-b23c-7c09-1b4ecd39bc3d"],"children":["43c5a42c-365e-c274-06dd-033cbc483883"],"data":{"attr":{"for":"Price-From","id":""},"form":{"type":"label","passwordPage":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"users":""}},{"_id":"43c5a42c-365e-c274-06dd-033cbc483883","text":true,"v":"From ($)"},{"_id":"4360f579-54ef-c883-779b-75db9c9ec8e9","type":"FormTextInput","tag":"input","classes":["ecde0205-5afe-c4ee-be2c-39daacc5cbad"],"children":[],"data":{"form":{"name":"Price (From)","type":"input","passwordPage":false},"attr":{"id":"Price-From","name":"Price-From","maxlength":256,"data-name":"Price (From)","placeholder":"","disabled":false,"type":"number","required":false,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"range-input","value":"price-from"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"357ea460-3b35-c87d-7592-ed51da9527df","type":"Block","tag":"div","classes":["7c4f0fb8-2445-b23c-7c09-1b4ecd39bc43"],"children":["1df7f2c9-ab97-6320-f930-c4319a5359f0","89644eec-edad-d90e-ce8a-096e9751d159"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"1df7f2c9-ab97-6320-f930-c4319a5359f0","type":"FormBlockLabel","tag":"label","classes":["7c4f0fb8-2445-b23c-7c09-1b4ecd39bc3d"],"children":["f5d36635-6a7d-4bb3-3137-c99b7f908222"],"data":{"attr":{"for":"Price-To","id":""},"form":{"type":"label","passwordPage":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"users":""}},{"_id":"f5d36635-6a7d-4bb3-3137-c99b7f908222","text":true,"v":"To ($)"},{"_id":"89644eec-edad-d90e-ce8a-096e9751d159","type":"FormTextInput","tag":"input","classes":["ecde0205-5afe-c4ee-be2c-39daacc5cbad"],"children":[],"data":{"form":{"name":"Price (To)","type":"input","passwordPage":false},"attr":{"id":"Price-To","name":"Price-To","maxlength":256,"data-name":"Price (To)","placeholder":"","disabled":false,"type":"number","required":false,"autofocus":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"range-input","value":"price-to"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"bf83b0ab-e5b5-a0fd-350b-0f6af39cb2b0","type":"FormSuccessMessage","tag":"div","classes":["7c4f0fb8-2445-b23c-7c09-1b4ecd39bc40"],"children":["eba8f2e7-0de9-676a-af55-854ca84cd7b0"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-done"}}},{"_id":"eba8f2e7-0de9-676a-af55-854ca84cd7b0","type":"Block","tag":"div","classes":["7c4f0fb8-2445-b23c-7c09-1b4ecd39bc42"],"children":["120f4994-6b55-4bdf-5f99-241cb872a273","3cb5f8de-5b89-3d34-e5c3-7efb7127a732","c5386dc9-0bb7-1b0b-a913-e3b63a4f3506"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"120f4994-6b55-4bdf-5f99-241cb872a273","type":"Heading","tag":"h1","classes":["7c4f0fb8-2445-b23c-7c09-1b4ecd39bc39"],"children":["d18afd3b-6066-4086-5022-ee3726a1bcbf","f3ce9db2-d5df-68a6-5401-bf55eccd7763"],"data":{"tag":"h1","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d18afd3b-6066-4086-5022-ee3726a1bcbf","type":"Strong","tag":"strong","classes":[],"children":["7cd79614-f6ff-5333-7348-ebf041622412"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7cd79614-f6ff-5333-7348-ebf041622412","text":true,"v":"Save these inputs"},{"_id":"f3ce9db2-d5df-68a6-5401-bf55eccd7763","text":true,"v":" to member profiles."},{"_id":"3cb5f8de-5b89-3d34-e5c3-7efb7127a732","type":"Paragraph","tag":"p","classes":["7c4f0fb8-2445-b23c-7c09-1b4ecd39bc3c"],"children":["8d3e2061-ec9d-1758-7b27-a4ba12a525a4","bec66516-7371-b155-1505-60a85c24c399"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"8d3e2061-ec9d-1758-7b27-a4ba12a525a4","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":"bec66516-7371-b155-1505-60a85c24c399","type":"Strong","tag":"strong","classes":[],"children":["bbfed8e7-6c73-7bf3-e1ca-b7b76bffa7e7"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"bbfed8e7-6c73-7bf3-e1ca-b7b76bffa7e7","text":true,"v":""},{"_id":"c5386dc9-0bb7-1b0b-a913-e3b63a4f3506","type":"Link","tag":"a","classes":["7c4f0fb8-2445-b23c-7c09-1b4ecd39bc3f"],"children":["015dbb56-39ee-6cce-f90f-ff8f2ede3d78"],"data":{"button":true,"block":"","link":{"mode":"external","url":"https://app.memberstack.com/signup"},"eventIds":[],"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":true},"visibility":{"conditions":[]}}},{"_id":"015dbb56-39ee-6cce-f90f-ff8f2ede3d78","text":true,"v":"Try Memberstack"},{"_id":"18b51576-0589-2513-3447-be4b08933be1","type":"FormErrorMessage","tag":"div","classes":[],"children":["8bd19038-2e5a-42ba-862b-c21f679cdf31"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-fail"}}},{"_id":"8bd19038-2e5a-42ba-862b-c21f679cdf31","type":"Block","tag":"div","classes":[],"children":["6770c972-80c5-647d-88f1-f67290482389"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6770c972-80c5-647d-88f1-f67290482389","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"7c4f0fb8-2445-b23c-7c09-1b4ecd39bc3e","fake":false,"type":"class","name":"form 10","namespace":"","comb":"","styleLess":"display: flex; flex-direction: column; grid-column-gap: 10px; grid-row-gap: 10px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","origin":null,"selector":null},{"_id":"5eeb7aa6-eb24-a583-d29d-d231e90b4c6f","fake":false,"type":"class","name":"container","namespace":"","comb":"","styleLess":"position: relative; width: 100%;","variants":{},"children":["04c9be61-61c7-13a6-ce28-a47e6f31114c"],"createdBy":"5c32e19c1213425c470436be","origin":null,"selector":null},{"_id":"7c4f0fb8-2445-b23c-7c09-1b4ecd39bc39","fake":false,"type":"class","name":"h1 5","namespace":"","comb":"","styleLess":"margin-top: 0px; color: hsla(0, 0.00%, 100.00%, 1.00); font-weight: 400;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","origin":null,"selector":null},{"_id":"7c4f0fb8-2445-b23c-7c09-1b4ecd39bc40","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","origin":null,"selector":null},{"_id":"7c4f0fb8-2445-b23c-7c09-1b4ecd39bc3d","fake":false,"type":"class","name":"label 3","namespace":"","comb":"","styleLess":"font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","origin":null,"selector":null},{"_id":"01910bd6-c336-5189-cf0f-71568d93844c","fake":false,"type":"class","name":"section blog featured list","namespace":"","comb":"","styleLess":"font-family: Arial;","variants":{},"children":[],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"be493314-70c0-58af-e646-ecdad756c36e","fake":false,"type":"class","name":"Form components","namespace":"","comb":"","styleLess":"padding-top: 4rem; padding-bottom: 4rem;","variants":{},"children":["af890653-7c7e-d635-91b6-737358404c87"],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"2e561486-8717-c3e1-c94b-2f60e45f8939","fake":false,"type":"class","name":"padding global","namespace":"","comb":"","styleLess":"","variants":{},"children":["b6ecef7c-8790-e41f-e752-b5bd0ea57412"],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"7c4f0fb8-2445-b23c-7c09-1b4ecd39bc42","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","origin":null,"selector":null},{"_id":"a0dedb4b-352a-5c52-0822-4d1fe7d27844","fake":false,"type":"class","name":"heading h3","namespace":"","comb":"","styleLess":"font-size: 3rem; line-height: 1.3;","variants":{},"children":[],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"30e35f4a-4769-6d57-8a39-760e31e2589e","fake":false,"type":"class","name":"margin-bottom 2","namespace":"","comb":"","styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;","variants":{"medium":{"styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;"},"small":{"styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;"},"tiny":{"styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;"}},"children":["30e35f4a-4769-6d57-8a39-760e31e258b7","30e35f4a-4769-6d57-8a39-760e31e258b8","30e35f4a-4769-6d57-8a39-760e31e258b9","a321b37e-da8c-043e-fda6-c052fe38eccb","a321b37e-da8c-043e-fda6-c052fe38eccd","90705d1f-1425-92ed-8b78-e004484ff188","90705d1f-1425-92ed-8b78-e004484ff189","5130463d-71e4-48dd-2d42-403515b56fc9","d3826aa4-c8fe-ef10-cb27-90a8efcba3ae","d3826aa4-c8fe-ef10-cb27-90a8efcba3af","c87f9757-0bde-9317-8a14-93adbf97e7e4","bc3ea4c3-0e2d-99fd-0ba0-43fabcc185f8","bc3ea4c3-0e2d-99fd-0ba0-43fabcc185f9"],"origin":null,"selector":null},{"_id":"90705d1f-1425-92ed-8b78-e004484ff189","fake":false,"type":"class","name":"margin-small","namespace":"","comb":"&","styleLess":"margin-top: 0rem; margin-right: 0rem; margin-left: 0rem;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"7c4f0fb8-2445-b23c-7c09-1b4ecd39bc43","fake":false,"type":"class","name":"input-wrap","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","origin":null,"selector":null},{"_id":"5589006a-4fc6-b79c-4815-bcd789461933","fake":false,"type":"class","name":"Form block range picker","namespace":"","comb":"","styleLess":"margin-top: 3rem;","variants":{},"children":[],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"ecde0205-5afe-c4ee-be2c-39daacc5cbad","fake":false,"type":"class","name":"input field","namespace":"","comb":"","styleLess":"min-height: 3rem; margin-bottom: 0px; border-top-style: solid; border-top-width: 1px; border-top-color: black; border-right-style: solid; border-right-width: 1px; border-right-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: black; border-left-style: solid; 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);","variants":{"tiny":{"styleLess":"margin-bottom: 0px;"}},"children":["34e85f8b-8c81-48f4-db69-5ab7b60fca06","31ea97f7-0a92-957d-f3d9-c77d291cc8cb","8a7821b0-1833-d447-9db6-3688a4d9c0f1","05b3678e-e04f-8993-93a8-d4bc42144828"],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"7c4f0fb8-2445-b23c-7c09-1b4ecd39bc3f","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","origin":null,"selector":null},{"_id":"7c4f0fb8-2445-b23c-7c09-1b4ecd39bc3c","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","origin":null,"selector":null},{"_id":"7c4f0fb8-2445-b23c-7c09-1b4ecd39bc41","fake":false,"type":"class","name":"form-row 2","namespace":"","comb":"","styleLess":"display: flex; justify-content: space-between; align-items: center; grid-column-gap: 10px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","origin":null,"selector":null},{"_id":"30e35f4a-4769-6d57-8a39-760e31e258a4","fake":false,"type":"class","name":"max-width-large","namespace":"","comb":"","styleLess":"width: 100%; max-width: 48rem;","variants":{},"children":["a321b37e-da8c-043e-fda6-c052fe38ecd1","a03b952b-2c37-583f-0999-1f1fce695eb6","5130463d-71e4-48dd-2d42-403515b56fc8","eff43235-dbf9-cd4a-7730-fb1422700876","ac3c774d-19da-d2a3-c1df-058aae5c7635","5546765d-a18f-f16d-cfad-aea399a9632d","896b788e-9a49-3060-6439-3ea4dd70e6b3","bc3ea4c3-0e2d-99fd-0ba0-43fabcc185f7","5ba3c36e-3768-1e33-9026-50dce2e21943","bbbca8ba-198b-590d-c624-36baebc70264"],"origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0,"codeComponentsRemovedCount":0}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
// Paste in head tag
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" />
// Styles custom for range slider
<style>
.irs {
font-family: inherit;
}
.irs--round .irs-bar{
background-color:#000;
}
.irs--round .irs-handle{
background-color:#fff;
border:4px solid #000000;
}
.irs--round .irs-from, .irs--round .irs-to, .irs--round .irs-single{
background-color:#000;
}
</style>// Paste in body
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
<!-- Range slider config script -->
<script>
$(document).ready(function() {
var rangeSlider = $('[range-input="range-slider"]');
var priceFromInput = $('[range-input="price-from"]');
var priceToInput = $('[range-input="price-to"]');
// Set the default range values
var defaultFrom = 1000;
var defaultTo = 5000;
rangeSlider.ionRangeSlider({
skin: "round", // You can also try "flat", "big", "modern", "sharp", or "square". Default styles can be overridden with CSS.
type: "double",
grid: true,
min: 0,
max: 10000,
from: defaultFrom,
to: defaultTo,
prefix: "$",
onStart: function(data) {
priceFromInput.val(data.from);
priceToInput.val(data.to);
},
onChange: function(data) {
priceFromInput.val(data.from);
priceToInput.val(data.to);
}
});
// Get the initial range values and update the inputs
var initialRange = rangeSlider.data("ionRangeSlider");
var initialData = initialRange.result;
priceFromInput.val(initialData.from);
priceToInput.val(initialData.to);
// Update the range slider and inputs when the inputs lose focus
priceFromInput.on("blur", function() {
var value = $(this).val();
var toValue = priceToInput.val();
// Perform validation
if (
value < initialRange.options.min ||
value > initialRange.options.max ||
value >= toValue ||
value > initialData.to // Check if fromValue is higher than the current toValue
) {
value = defaultFrom;
}
rangeSlider.data("ionRangeSlider").update({
from: value
});
priceFromInput.val(value);
});
priceToInput.on("blur", function() {
var value = $(this).val();
var fromValue = priceFromInput.val();
// Perform validation
if (
value < initialRange.options.min ||
value > initialRange.options.max ||
value <= fromValue ||
value < initialData.from // Check if toValue is lower than the current fromValue
) {
value = defaultTo;
}
rangeSlider.data("ionRangeSlider").update({
to: value
});
priceToInput.val(value);
});
});
</script>