# Split Panel [component-header:sl-split-panel] Split panels display two panels alongside each other, often allowing the user to resize them. ```html preview
Start
End
``` ## Examples ### Initial Position To set the initial position of the split in pixels, use the `position` attribute. If you need to set the initial value as a percentage, use the `setPositionPercentage()` method instead. ```html preview
Start
End
``` ### Vertical Add the `vertical` attribute to render the split panel in a vertical orientation where the start and end panels are stacked. ```html preview
Start
End
``` ### Snapping To snap panels at specific locations, add the `snap` attribute with one or more space-separated values. Values can be in pixels or percentages. For example, to snap the panel at `100px` and `50%`, use `snap="100px 50%"`. To customize how close the divider must be before snapping, use the `snap-threshold` attribute. ```html preview
Start
End
``` ### Disabled Add the `disabled` attribute to prevent the split panel from being resized. ```html preview
Start
End
``` ### Setting the Primary Panel By default, `start` is the primary panel and `end` is the secondary panel. When the host element is resized, the primary panel will maintain its size and the secondary panel will grow or shrink to fit the remaining space. You can change the primary panel using the `primary` attribute. Try resizing the example below with each option and notice how panels respond. ```html preview
Start
End
Start End
``` ### Min & Max To set a minimum or maximum size of the primary panel, use the `--min` and `--max` custom properties. Since the secondary panel is flexible, size restrictions can only be applied to the primary panel. This examples shows how you can make both panels be a minimum of 150px using `--min`, `--max`, and the `calc()` function. ```html preview
Start
End
``` ### Nested Split Panels Create complex layouts that can be resized independently by nesting split panels. ```html preview
Start
Top
Bottom
``` ### Customizing the Divider You can target the `divider` part to apply CSS properties to the divider. To add a handle, slot an icon or another element into the `handle` slot. When customizing the divider, make sure to think about focus styles for keyboard users. ```html preview
Start
End
``` Here's a more elaborate example that changes the divider's color and width and adds a styled handle. ```html preview
Start
End
``` [component-metadata:sl-split-panel]