Skip to content

Splitter

<quiet-splitter> stable since 1.0

A draggable splitter that separates two panels, allowing users to resize them.

Splitters follow the ARIA APG window splitter pattern for accessibility. They consist of a draggable separator positioned between two resizable panels.

Start panel
End panel
 
<quiet-splitter id="splitter__overview">
  <div slot="start">Start panel</div>
  <div slot="end">End panel</div>
</quiet-splitter>

<style>
  #splitter__overview {
    height: 200px;

    /* Center the text for the demo */
    [slot="start"],
    [slot="end"] {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
</style>

Examples Jump to heading

Setting the position Jump to heading

You can set the initial position of the divider using the position attribute or update it programmatically via JavaScript. The value is a number from 0 to 100 representing the divider's position as a percentage.

Start panel
End panel
 
<quiet-splitter position="75" id="splitter__position">
  <div slot="start">Start panel</div>
  <div slot="end">End panel</div>
</quiet-splitter>

<style>
  #splitter__position {
    height: 200px;

    /* Center the text for the demo */
    [slot="start"],
    [slot="end"] {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
</style>

Constraining the divider Jump to heading

Set the --divider-min-position and --divider-max-position custom properties to limit the range of the divider's movement. In this example, the divider is constrained between 25% and 75% of the splitter's size.

Start panel
End panel
 
<quiet-splitter style="--divider-min-position: 25%; --divider-max-position: 75%;" id="splitter__constraints">
  <div slot="start">Start panel</div>
  <div slot="end">End panel</div>
</quiet-splitter>

<style>
  #splitter__constraints {
    height: 200px;

    /* Center the text for the demo */
    [slot="start"],
    [slot="end"] {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
</style>

Changing the orientation Jump to heading

Set the orientation attribute to vertical to change the splitter's orientation.

Start panel
End panel
 
<quiet-splitter orientation="vertical" id="splitter__orientation">
  <div slot="start">Start panel</div>
  <div slot="end">End panel</div>
</quiet-splitter>

<style>
  #splitter__orientation {
    height: 400px;

    /* Center the text for the demo */
    [slot="start"],
    [slot="end"] {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
</style>

Snapping Jump to heading

Set the snap attribute to a space-separated list of positions at which to snap. Only percentages are supported. Use the snap-threshold attribute to change the threshold at which snapping occurs.

Start panel
End panel
 
<div id="splitter__snap">
  <quiet-splitter snap="25% 50% 75%">
    <div slot="start">Start panel</div>
    <div slot="end">End panel</div>
  </quiet-splitter>

  <div class="snap-dots">
    <span class="snap-dot" style="left: 25%;"></span>
    <span class="snap-dot" style="left: 50%;"></span>
    <span class="snap-dot" style="left: 75%;"></span>
  </div>
</div>

<style>
  #splitter__snap {
    quiet-splitter {
      height: 200px;
    }

    /* Center the text for the demo */
    [slot="start"],
    [slot="end"] {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .snap-dots {
      position: relative;
      width: 100%;
      margin-top: .5rem;
    }

    .snap-dot {
      position: absolute;
      width: 4px;
      height: 4px;
      background-color: gray;
      border-radius: 50%;
      transform: translateX(-50%);
    }    
  }
</style>

Disabling Jump to heading

When the disabled attribute is set, the divider cannot be dragged or focused and the handle is hidden, though the divider line remains visible.

Start panel
End panel
 
<quiet-splitter disabled id="splitter__disabled">
  <div slot="start">Start panel</div>
  <div slot="end">End panel</div>
</quiet-splitter>

<style>
  #splitter__disabled {
    height: 200px;

    /* Center the text for the demo */
    [slot="start"],
    [slot="end"] {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
</style>

Nested splitters Jump to heading

Splitters can be nested to create advanced layouts.

Panel 1
Panel 2
Panel 3
 
<quiet-splitter id="splitter__nested">
  <div slot="start">
    Panel 1
  </div>
  <div slot="end">
    <quiet-splitter orientation="vertical">
      <div slot="start">
        Panel 2
      </div>
      <div slot="end">
        Panel 3
      </div>
    </quiet-splitter>
  </div>
</quiet-splitter>

<style>
  #splitter__nested {
    height: 300px;

    quiet-splitter {
      height: 100%;
      border-radius: 0;
      border: none;

      > div {
        height: 100%;
      }
    }

    /* Center the text for the demo */
    [slot="start"],
    [slot="end"] {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }    
  }
</style>

Styling the divider Jump to heading

You can customize the divider by slotting content such as an icon into the handle slot. To change the divider's width, set the --divider-width custom property.

Start panel
End panel
 
<quiet-splitter style="height: 200px;" id="splitter__custom-divider">
  <div slot="start">Start panel</div>
  <quiet-icon slot="handle" name="grip-vertical"></quiet-icon>
  <div slot="end">End panel</div>
</quiet-splitter>

<style>
  #splitter__custom-divider {
    --divider-width: 1rem;

    /* Center the text for the demo */
    [slot="start"],
    [slot="end"] {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN npm

To manually import <quiet-splitter> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/splitter/splitter.js';

To manually import <quiet-splitter> from npm, use the following code.

import '@quietui/quiet/dist/components/splitter/splitter.js';

Slots Jump to heading

Splitter supports the following slots. Learn more about using slots

Name Description
start The content for the primary (start) panel.
end The content for the secondary (end) panel.
handle The draggable handle that separates the panels.

Properties Jump to heading

Splitter has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute Description Reflects Type Default
position The current position of the divider as a percentage (0-100). number 50
orientation The orientation of the splitter. 'horizontal'
'vertical' 		'horizontal'
disabled Disables the splitter, preventing it from being focused and resized. boolean false
snap A space-separated list of percentage snap points, e.g. "25% 50% 75%". string ''
snapThreshold
snap-threshold 		The maximum distance (in pixels) within which the divider will snap to a specified snap point. number 10

Events Jump to heading

Splitter dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events

Name Description

CSS custom properties Jump to heading

Splitter supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name Description Default
--divider-min-position Minimum position of the divider (as a percentage or pixel value). 0%
--divider-max-position Maximum position of the divider (as a percentage or pixel value). 100%
--divider-draggable-area The size of the divider's draggable area (can be larger than the visible area). 1rem
--divider-width The width of the visual divider. 0.125rem

CSS parts Jump to heading

Splitter exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name Description CSS selector
start The content to show in the first (start) panel. ::part(start)
end The content to show in the second (end) panel. ::part(end)
divider The draggable divider that separates the panels. ::part(divider)
handle The visual handle within the divider (only present when not using the handle slot). ::part(handle)

Custom States Jump to heading

Splitter has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states

Name Description CSS selector
disabled Applied when the splitter is disabled. :state(disabled)
dragging Applied when the splitter is being dragged. :state(dragging)
focused Applied when the splitter has focus. :state(focused)
Search this website Toggle dark mode Get the code on GitHub Follow @quietui.org on Bluesky Follow @quiet_ui on X

    No results found