{"id":13807885,"url":"https://github.com/carlfranklin/BlazorSliders","last_synced_at":"2025-05-14T00:32:14.584Z","repository":{"id":49126141,"uuid":"342669847","full_name":"carlfranklin/BlazorSliders","owner":"carlfranklin","description":"Create multiple panels with horizontal and vertical splitters","archived":false,"fork":false,"pushed_at":"2024-06-17T16:18:53.000Z","size":488,"stargazers_count":38,"open_issues_count":7,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-03T16:16:16.625Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/carlfranklin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-26T18:47:06.000Z","updated_at":"2024-12-12T22:59:49.000Z","dependencies_parsed_at":"2024-04-10T02:56:12.323Z","dependency_job_id":"8d4bb99b-291a-43c8-b5c3-21e45ceb5a34","html_url":"https://github.com/carlfranklin/BlazorSliders","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carlfranklin%2FBlazorSliders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carlfranklin%2FBlazorSliders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carlfranklin%2FBlazorSliders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carlfranklin%2FBlazorSliders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carlfranklin","download_url":"https://codeload.github.com/carlfranklin/BlazorSliders/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254046435,"owners_count":22005593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:31.674Z","updated_at":"2025-05-14T00:32:09.571Z","avatar_url":"https://github.com/carlfranklin.png","language":"HTML","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["2D/3D Rendering engines"],"readme":"# \u003cimg src=\"icon.png\" height=\"30px\"\u003e BlazorSliders\n\n**Nuget**: https://www.nuget.org/packages/BlazorSliders/\n\n```\nInstall-Package BlazorSliders\n```\n\nCreate multiple panels separated by sliding splitters.\n\nGithub: https://github.com/carlfranklin/BlazorSliders\n\n\u003c!-- toc --\u003e\n## Contents\n\n  * [Live Demo:](#live-demo)\n  * [YouTube Demo (BlazorTrain):](#youtube-demo-blazortrain)\n  * [Description](#description)\n  * [Usage](#usage)\n    * [Simple Vertical Split:](#simple-vertical-split)\n    * [Simple Horizontal Split:](#simple-horizontal-split)\n    * [Four Panels:](#four-panels)\n    * [Initial size and position based on percent size of browser:](#initial-size-and-position-based-on-percent-size-of-browser)\n    * [Complex Nesting:](#complex-nesting)\n    * [NavMenu used in demos:](#navmenu-used-in-demos)\n  * [Icon](#icon)\u003c!-- endToc --\u003e\n\n\n## Live Demo:\n\nhttps://blazorslidertest.azurewebsites.net/\n\n\n## YouTube Demo (BlazorTrain):\n\nhttps://youtu.be/fNDd7moZJ4c\n\n\n## Description\n\nThere are four main components:\n\n\n#### AbsolutePanel\n\nAbsolutePanel is the container for a page. It provides events for when the window is resized.\n\n\n#### Window\n\nWindow is used by the AbsolutePanel but can also be used on its own. It provides an event for when the window (browser) is resized, passing the Width and Height.\n\n\n#### VerticalSliderPanel\n\nProvides two content components and a vertical splitter between the two. Handles all UI requirements.\n\n\n#### HorizontalSliderPanel\n\nProvides two content components and a horizontal splitter between the two. Handles all UI requirements.\n\n\n## Usage\n\nAdd to *_Imports.razor*:\n\n```c#\n@using BlazorSliders\n```\n\nChange your *\\Shared\\MainLayout.razor* to the following:\n\n```\n@inherits LayoutComponentBase\n@Body\n```\n\n**For Blazor Server:**\n\n`ServerPrerendered` is not supported. \n\nIn your *_Hosts.cshtml* file, set the following:\n\n```xml\n\u003ccomponent type=\"typeof(App)\" render-mode=\"Server\" /\u003e\n```\n\nFor .NET 6 projects, in your *_Hosts.cshtml* file, set the following:\n\n```xml\n\u003ccomponent type=\"typeof(HeadOutlet)\" render-mode=\"Server\" /\u003e\n```\n\nIn .NET 5: Add the following line to `ConfigureServices` in *Startup.cs* :\n\n\u003c!-- snippet: AddSliderInteropServer --\u003e\n\u003ca id='snippet-AddSliderInteropServer'\u003e\u003c/a\u003e\n```cs\nservices.AddScoped\u003cSliderInterop\u003e();\n```\n\u003csup\u003e\u003ca href='/BlazorSlidersTest/Startup.cs#L32-L34' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-AddSliderInteropServer' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\nIn .NET 6: Add the following to *Program.cs*:\n\n\u003c!-- snippet: AddSliderInteropServer --\u003e\n\u003ca id='snippet-AddSliderInteropServer'\u003e\u003c/a\u003e\n```cs\nservices.AddScoped\u003cSliderInterop\u003e();\n```\n\u003csup\u003e\u003ca href='/BlazorSlidersTest/Startup.cs#L32-L34' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-AddSliderInteropServer' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n**For Blazor WebAssembly:**\n\nAdd the following to `Main()` in *Program.cs*:\n\n\u003c!-- snippet: AddSliderInteropWasm --\u003e\n\u003ca id='snippet-AddSliderInteropWasm'\u003e\u003c/a\u003e\n```cs\nbuilder.Services.AddScoped\u003cSliderInterop\u003e();\n```\n\u003csup\u003e\u003ca href='/BlazorSliderTestWasm/Program.cs#L22-L24' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-AddSliderInteropWasm' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n### Simple Vertical Split:\n\n\u003c!-- snippet: BlazorSliderTestWasm/Pages/Index.razor --\u003e\n\u003ca id='snippet-BlazorSliderTestWasm/Pages/Index.razor'\u003e\u003c/a\u003e\n```razor\n@page \"/\"\n\n\u003cAbsolutePanel AutoResize=\"true\"\u003e\n    \u003cVerticalSliderPanel LeftPanelStartingWidth=\"400\"\u003e\n        \u003cLeftChildContent\u003e\n            \u003cdiv style=\"padding:10px;\"\u003e\n                \u003ch3\u003eLeft Content\u003c/h3\u003e\n                This is a demo of a single vertical slider panel.\n            \u003c/div\u003e\n        \u003c/LeftChildContent\u003e\n        \u003cRightChildContent\u003e\n            \u003cdiv style=\"padding:10px;\"\u003e\n                \u003ch3\u003eRight Content\u003c/h3\u003e\n                \u003cNavMenu /\u003e\n            \u003c/div\u003e\n        \u003c/RightChildContent\u003e\n    \u003c/VerticalSliderPanel\u003e\n\u003c/AbsolutePanel\u003e\n```\n\u003csup\u003e\u003ca href='/BlazorSliderTestWasm/Pages/Index.razor#L1-L19' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-BlazorSliderTestWasm/Pages/Index.razor' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n### Simple Horizontal Split:\n\n\u003c!-- snippet: BlazorSliderTestWasm/Pages/Horizontals.razor --\u003e\n\u003ca id='snippet-BlazorSliderTestWasm/Pages/Horizontals.razor'\u003e\u003c/a\u003e\n```razor\n@page \"/horizontals\"\n\n\u003cAbsolutePanel AutoResize=\"true\"\u003e\n    \u003cHorizontalSliderPanel TopPanelHeight=\"200\"\u003e\n        \u003cTopChildContent\u003e\n            \u003cdiv style=\"padding:10px;\"\u003e\n                \u003ch3\u003eTop Content\u003c/h3\u003e\n                This is a demo of a single horizontal slider panel.\n            \u003c/div\u003e\n        \u003c/TopChildContent\u003e\n        \u003cBottomChildContent\u003e\n            \u003cdiv style=\"padding:10px;\"\u003e\n                \u003ch3\u003eBottom Content\u003c/h3\u003e\n                \u003cNavMenu /\u003e\n            \u003c/div\u003e\n        \u003c/BottomChildContent\u003e\n    \u003c/HorizontalSliderPanel\u003e\n\u003c/AbsolutePanel\u003e\n```\n\u003csup\u003e\u003ca href='/BlazorSliderTestWasm/Pages/Horizontals.razor#L1-L18' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-BlazorSliderTestWasm/Pages/Horizontals.razor' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n### Four Panels:\n\n\u003c!-- snippet: BlazorSliderTestWasm/Pages/FourPanels.razor --\u003e\n\u003ca id='snippet-BlazorSliderTestWasm/Pages/FourPanels.razor'\u003e\u003c/a\u003e\n```razor\n@page \"/fourpanels\"\n\n\u003cAbsolutePanel AutoResize=\"true\"\u003e\n    \u003cVerticalSliderPanel LeftPanelStartingWidth=\"400\"\u003e\n        \u003cLeftChildContent\u003e\n            \u003cHorizontalSliderPanel PanelPosition=\"PanelPosition.Left\"\n                                   TopStyleString=\"background-color:antiquewhite;\"\n                                   BottomStyleString=\"background-color:aliceblue;\"\n                                   TopPanelHeight=\"200\"\u003e\n                \u003cTopChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eTop Content 1\u003c/h3\u003e\n                        This is a demo of four panels with styling\n                    \u003c/div\u003e\n                \u003c/TopChildContent\u003e\n                \u003cBottomChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eBottom Content 1\u003c/h3\u003e\n                        \u003cNavMenu /\u003e\n                    \u003c/div\u003e\n                \u003c/BottomChildContent\u003e\n            \u003c/HorizontalSliderPanel\u003e\n        \u003c/LeftChildContent\u003e\n        \u003cRightChildContent\u003e\n            \u003cHorizontalSliderPanel PanelPosition=\"PanelPosition.Right\"\n                                   TopStyleString=\"background-color:orange;\"\n                                   BottomStyleString=\"background-color:yellow;\"\n                                   TopPanelHeight=\"400\"\u003e\n                \u003cTopChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eTop Content 2\u003c/h3\u003e\n                    \u003c/div\u003e\n                \u003c/TopChildContent\u003e\n                \u003cBottomChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eBottom Content 2\u003c/h3\u003e\n                    \u003c/div\u003e\n                \u003c/BottomChildContent\u003e\n            \u003c/HorizontalSliderPanel\u003e\n        \u003c/RightChildContent\u003e\n    \u003c/VerticalSliderPanel\u003e\n\u003c/AbsolutePanel\u003e\n```\n\u003csup\u003e\u003ca href='/BlazorSliderTestWasm/Pages/FourPanels.razor#L1-L43' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-BlazorSliderTestWasm/Pages/FourPanels.razor' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n### Initial size and position based on percent size of browser:\n\n\u003c!-- snippet: BlazorSliderTestWasm/Pages/WindowResize.razor --\u003e\n\u003ca id='snippet-BlazorSliderTestWasm/Pages/WindowResize.razor'\u003e\u003c/a\u003e\n```razor\n@page \"/windowresize\"\n\n\u003cWindow WindowResized=\"OnWindowResized\" /\u003e\n\n@(WindowSize != null)\n{\n\u003cAbsolutePanel AutoResize=\"true\"\u003e\n    \u003cVerticalSliderPanel LeftPanelStartingWidth=\"@VerticalLeftPanelWidth\"\u003e\n        \u003cLeftChildContent\u003e\n            \u003cHorizontalSliderPanel PanelPosition=\"PanelPosition.Left\"\n                                   TopStyleString=\"background-color:antiquewhite;\"\n                                   BottomStyleString=\"background-color:aliceblue;\"\n                                   TopPanelHeight=\"@LeftHorizontalTopPanelHeight\"\u003e\n                \u003cTopChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eTop Content 1\u003c/h3\u003e\n                        This demo sets the location of the sliders based on a percentage of the\n                        initial size of the browser.\n                    \u003c/div\u003e\n                \u003c/TopChildContent\u003e\n                \u003cBottomChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eBottom Content 1\u003c/h3\u003e\n                        \u003cNavMenu /\u003e\n                    \u003c/div\u003e\n                \u003c/BottomChildContent\u003e\n            \u003c/HorizontalSliderPanel\u003e\n        \u003c/LeftChildContent\u003e\n        \u003cRightChildContent\u003e\n            \u003cHorizontalSliderPanel PanelPosition=\"PanelPosition.Right\"\n                                   TopStyleString=\"background-color:orange;\"\n                                   BottomStyleString=\"background-color:yellow;\"\n                                   TopPanelHeight=\"@RightHorizontalTopPanelHeight\"\u003e\n                \u003cTopChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eTop Content 2\u003c/h3\u003e\n                    \u003c/div\u003e\n                \u003c/TopChildContent\u003e\n                \u003cBottomChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eBottom Content 2\u003c/h3\u003e\n                    \u003c/div\u003e\n                \u003c/BottomChildContent\u003e\n            \u003c/HorizontalSliderPanel\u003e\n        \u003c/RightChildContent\u003e\n    \u003c/VerticalSliderPanel\u003e\n\u003c/AbsolutePanel\u003e\n}\n\n@code\n{\n    Size WindowSize { get; set; } = null;\n\n    int VerticalLeftPanelWidthPercent = 80;\n    int LeftHorizontal1TopPanelHeightPercent = 40;\n    int RightHorizontal1TopPanelHeightPercent = 60;\n\n    int VerticalLeftPanelWidth\n    {\n        get\n        {\n            if (WindowSize != null)\n            {\n                return WindowSize.Width * VerticalLeftPanelWidthPercent / 100;\n            }\n            else\n                return 0;\n        }\n    }\n\n    int LeftHorizontalTopPanelHeight\n    {\n        get\n        {\n            if (WindowSize != null)\n            {\n                var height = WindowSize.Height * LeftHorizontal1TopPanelHeightPercent / 100;\n                return height;\n            }\n            else\n                return 0;\n        }\n    }\n\n    int RightHorizontalTopPanelHeight\n    {\n        get\n        {\n            if (WindowSize != null)\n            {\n                var height = WindowSize.Height * RightHorizontal1TopPanelHeightPercent / 100;\n                return height;\n            }\n            else\n                return 0;\n        }\n    }\n\n    void OnWindowResized(Size Size)\n    {\n        WindowSize = Size;\n    }\n}\n```\n\u003csup\u003e\u003ca href='/BlazorSliderTestWasm/Pages/WindowResize.razor#L1-L103' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-BlazorSliderTestWasm/Pages/WindowResize.razor' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n### Complex Nesting:\n\n\u003e Note: Vertical nesting in vertical panels and horizontal nesting in horizontal panels has now been implemented as shown below.\n\n#### Vertical Panel Nested in Vertical Panel:\n\n\u003c!-- snippet: BlazorSliderTestWasm/Pages/DoubleVertical.razor --\u003e\n\u003ca id='snippet-BlazorSliderTestWasm/Pages/DoubleVertical.razor'\u003e\u003c/a\u003e\n```razor\n@page \"/doublevertical\"\n\n\u003cAbsolutePanel AutoResize=\"true\"\u003e\n    \u003cVerticalSliderPanel LeftPanelStartingWidth=\"600\"\u003e\n        \u003cLeftChildContent\u003e\n            \u003cVerticalSliderPanel PanelPosition=\"PanelPosition.Left\" LeftPanelStartingWidth=\"400\"\u003e\n                \u003cLeftChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eLeft Content in the Left Parent Panel\u003c/h3\u003e\n                        This is a demo of a nested vertical slider panel.\n                    \u003c/div\u003e\n                \u003c/LeftChildContent\u003e\n                \u003cRightChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eRight Content in the Left Parent Panel\u003c/h3\u003e\n                    \u003c/div\u003e\n                \u003c/RightChildContent\u003e\n            \u003c/VerticalSliderPanel\u003e\n        \u003c/LeftChildContent\u003e\n        \u003cRightChildContent\u003e\n            \u003cVerticalSliderPanel PanelPosition=\"PanelPosition.Right\" LeftPanelStartingWidth=\"400\"\u003e\n                \u003cLeftChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eLeft Content in the Right Parent Panel\u003c/h3\u003e\n                    \u003c/div\u003e\n                \u003c/LeftChildContent\u003e\n                \u003cRightChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eRight Content in the Right Parent Panel\u003c/h3\u003e\n                        \u003cNavMenu /\u003e\n                    \u003c/div\u003e\n                \u003c/RightChildContent\u003e\n            \u003c/VerticalSliderPanel\u003e\n\n        \u003c/RightChildContent\u003e\n    \u003c/VerticalSliderPanel\u003e\n\u003c/AbsolutePanel\u003e\n```\n\u003csup\u003e\u003ca href='/BlazorSliderTestWasm/Pages/DoubleVertical.razor#L1-L37' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-BlazorSliderTestWasm/Pages/DoubleVertical.razor' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n#### Horizontal Panel Nested in Horizontal Panel:\n\n\u003c!-- snippet: BlazorSliderTestWasm/Pages/DoubleHorizontal.razor --\u003e\n\u003ca id='snippet-BlazorSliderTestWasm/Pages/DoubleHorizontal.razor'\u003e\u003c/a\u003e\n```razor\n@page \"/doublehorizontal\"\n\n\u003cAbsolutePanel AutoResize=\"true\"\u003e\n    \u003cHorizontalSliderPanel TopPanelHeight=\"400\"\u003e\n        \u003cTopChildContent\u003e\n            \u003cHorizontalSliderPanel PanelPosition=\"PanelPosition.Top\" TopPanelHeight=\"200\"\u003e\n                \u003cTopChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eTop Content in the Top Parent Panel\u003c/h3\u003e\n                        This is a demo of a nested horizontal slider panel.\n                    \u003c/div\u003e\n                \u003c/TopChildContent\u003e\n                \u003cBottomChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eBottom Content in the Top Parent Panel\u003c/h3\u003e\n                    \u003c/div\u003e\n                \u003c/BottomChildContent\u003e\n            \u003c/HorizontalSliderPanel\u003e\n        \u003c/TopChildContent\u003e\n        \u003cBottomChildContent\u003e\n            \u003cHorizontalSliderPanel PanelPosition=\"PanelPosition.Bottom\" TopPanelHeight=\"200\"\u003e\n                \u003cTopChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eTop Content in the Bottom Parent Panel\u003c/h3\u003e\n                    \u003c/div\u003e\n                \u003c/TopChildContent\u003e\n                \u003cBottomChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eBottom Content in the Bottom Parent Panel\u003c/h3\u003e\n                        \u003cNavMenu /\u003e\n                    \u003c/div\u003e\n                \u003c/BottomChildContent\u003e\n            \u003c/HorizontalSliderPanel\u003e\n        \u003c/BottomChildContent\u003e\n    \u003c/HorizontalSliderPanel\u003e\n\u003c/AbsolutePanel\u003e\n```\n\u003csup\u003e\u003ca href='/BlazorSliderTestWasm/Pages/DoubleHorizontal.razor#L1-L36' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-BlazorSliderTestWasm/Pages/DoubleHorizontal.razor' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n#### Crazy Nesting Inception:\n\n\u003c!-- snippet: BlazorSliderTestWasm/Pages/Crazy.razor --\u003e\n\u003ca id='snippet-BlazorSliderTestWasm/Pages/Crazy.razor'\u003e\u003c/a\u003e\n```razor\n@page \"/crazy\"\n\n\u003cAbsolutePanel AutoResize=\"true\"\u003e\n    \u003cVerticalSliderPanel LeftPanelStartingWidth=\"400\"\u003e\n        \u003cLeftChildContent\u003e\n            \u003cHorizontalSliderPanel PanelPosition=\"PanelPosition.Left\"\n                                   TopStyleString=\"background-color:antiquewhite;\"\n                                   BottomStyleString=\"background-color:aliceblue;\"\n                                   TopPanelHeight=\"200\"\u003e\n                \u003cTopChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eTop Content 1\u003c/h3\u003e\n                        This is the craziest demo of all\n                    \u003c/div\u003e\n                \u003c/TopChildContent\u003e\n                \u003cBottomChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eBottom Content 1\u003c/h3\u003e\n                        \u003cNavMenu /\u003e\n                    \u003c/div\u003e\n                \u003c/BottomChildContent\u003e\n            \u003c/HorizontalSliderPanel\u003e\n        \u003c/LeftChildContent\u003e\n        \u003cRightChildContent\u003e\n            \u003cHorizontalSliderPanel PanelPosition=\"PanelPosition.Right\"\n                                   BottomStyleString=\"background-color:violet;\"\n                                   TopPanelHeight=\"600\"\u003e\n                \u003cTopChildContent\u003e\n                    \u003cVerticalSliderPanel PanelPosition=\"PanelPosition.Top\"\n                                         LeftPanelStartingWidth=\"700\"\u003e\n                        \u003cLeftChildContent\u003e\n                            \u003cHorizontalSliderPanel PanelPosition=\"PanelPosition.Left\"\n                                                   TopStyleString=\"background-color:orange;\"\n                                                   BottomStyleString=\"background-color:lightblue;\"\n                                                   TopPanelHeight=\"300\"\u003e\n                                \u003cTopChildContent\u003e\n                                    \u003cdiv style=\"padding:10px;\"\u003e\n                                        \u003ch3\u003eTop Content 2\u003c/h3\u003e\n                                    \u003c/div\u003e\n                                \u003c/TopChildContent\u003e\n                                \u003cBottomChildContent\u003e\n                                    \u003cdiv style=\"padding:10px;\"\u003e\n                                        \u003ch3\u003eBottom Content 2\u003c/h3\u003e\n                                    \u003c/div\u003e\n                                \u003c/BottomChildContent\u003e\n                            \u003c/HorizontalSliderPanel\u003e\n                        \u003c/LeftChildContent\u003e\n                        \u003cRightChildContent\u003e\n                            \u003cHorizontalSliderPanel PanelPosition=\"PanelPosition.Right\"\n                                                   TopStyleString=\"background-color:pink;\"\n                                                   BottomStyleString=\"background-color:lightgreen;\"\n                                                   TopPanelHeight=\"400\"\u003e\n                                \u003cTopChildContent\u003e\n                                    \u003cdiv style=\"padding:10px;\"\u003e\n                                        \u003ch3\u003eTop Content 3\u003c/h3\u003e\n                                    \u003c/div\u003e\n                                \u003c/TopChildContent\u003e\n                                \u003cBottomChildContent\u003e\n                                    \u003cdiv style=\"padding:10px;\"\u003e\n                                        \u003ch3\u003eBottom Content 3\u003c/h3\u003e\n                                    \u003c/div\u003e\n                                \u003c/BottomChildContent\u003e\n                            \u003c/HorizontalSliderPanel\u003e\n                        \u003c/RightChildContent\u003e\n                    \u003c/VerticalSliderPanel\u003e\n                \u003c/TopChildContent\u003e\n                \u003cBottomChildContent\u003e\n                    \u003cdiv style=\"padding:10px;\"\u003e\n                        \u003ch3\u003eBottom Content 4\u003c/h3\u003e\n                    \u003c/div\u003e\n                \u003c/BottomChildContent\u003e\n            \u003c/HorizontalSliderPanel\u003e\n        \u003c/RightChildContent\u003e\n    \u003c/VerticalSliderPanel\u003e\n\u003c/AbsolutePanel\u003e\n```\n\u003csup\u003e\u003ca href='/BlazorSliderTestWasm/Pages/Crazy.razor#L1-L75' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-BlazorSliderTestWasm/Pages/Crazy.razor' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n### NavMenu used in demos:\n\n\u003c!-- snippet: BlazorSliderTestWasm/Shared/NavMenu.razor --\u003e\n\u003ca id='snippet-BlazorSliderTestWasm/Shared/NavMenu.razor'\u003e\u003c/a\u003e\n```razor\n\u003cdiv\u003e\n    \u003cNavLink class=\"nav-link\" href=\"\" Match=\"NavLinkMatch.All\"\u003e\n        \u003cspan class=\"oi oi-resize-width\" aria-hidden=\"true\"\u003e\u003c/span\u003e Vertical\n    \u003c/NavLink\u003e\n    \u003cNavLink class=\"nav-link\" href=\"horizontals\"\u003e\n        \u003cspan class=\"oi oi-resize-height\" aria-hidden=\"true\"\u003e\u003c/span\u003e Horizontal\n    \u003c/NavLink\u003e\n    \u003cNavLink class=\"nav-link\" href=\"fourpanels\"\u003e\n        \u003cspan class=\"oi oi-resize-both\" aria-hidden=\"true\"\u003e\u003c/span\u003e 4 Panels\n    \u003c/NavLink\u003e\n    \u003cNavLink class=\"nav-link\" href=\"windowresize\"\u003e\n        \u003cspan class=\"oi oi-resize-both\" aria-hidden=\"true\"\u003e\u003c/span\u003e Percent Width\n    \u003c/NavLink\u003e\n    \u003cNavLink class=\"nav-link\" href=\"crazy\"\u003e\n        \u003cspan class=\"oi oi-resize-both\" aria-hidden=\"true\"\u003e\u003c/span\u003e Crazy\n    \u003c/NavLink\u003e\n    \u003cNavLink class=\"nav-link\" href=\"doublevertical\"\u003e\n        \u003cspan class=\"oi oi-resize-both\" aria-hidden=\"true\"\u003e\u003c/span\u003e Double Vertical\n    \u003c/NavLink\u003e\n    \u003cNavLink class=\"nav-link\" href=\"doublehorizontal\"\u003e\n        \u003cspan class=\"oi oi-resize-both\" aria-hidden=\"true\"\u003e\u003c/span\u003e Double Horizontal\n    \u003c/NavLink\u003e\n\u003c/div\u003e\n```\n\u003csup\u003e\u003ca href='/BlazorSliderTestWasm/Shared/NavMenu.razor#L1-L23' title='Snippet source file'\u003esnippet source\u003c/a\u003e | \u003ca href='#snippet-BlazorSliderTestWasm/Shared/NavMenu.razor' title='Start of snippet'\u003eanchor\u003c/a\u003e\u003c/sup\u003e\n\u003c!-- endSnippet --\u003e\n\n\n\n## Icon\n\n[slide](https://thenounproject.com/term/slide/3631831/) designed by [Eucalyp](https://thenounproject.com/eucalyp) from [The Noun Project](https://thenounproject.com/). Licensed under [Creative Commons](https://creativecommons.org/licenses/by/3.0/us/legalcode).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarlfranklin%2FBlazorSliders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarlfranklin%2FBlazorSliders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarlfranklin%2FBlazorSliders/lists"}