A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.
<nve-resize-handle></nve-resize-handle>
Installation
<script type="module">
import '@nvidia-elements/core/resize-handle/define.js';
</script>
<nve-resize-handle></nve-resize-handle>
nve api.get nve-resize-handle
Vertical
Vertical resize handle for side-by-side panel layouts and horizontal split panes.
<div style="height: 200px">
<nve-resize-handle orientation="vertical"></nve-resize-handle>
</div>
Split Horizontal
Horizontal split pane with draggable divider that adjusts top and bottom panel heights.
<section
id="split-horizontal-demo"
style="
display: grid;
width: 250px;
height: 250px;
grid-template-rows: 1fr auto 1fr;
border: 1px solid var(--nve-ref-border-color);
"
>
<div style="background: hsla(0, 0%, 65%, 0.1)"></div>
<nve-resize-handle min="20" max="230" value="125" step="20"></nve-resize-handle>
<div></div>
</section>
<script type="module">
const handle = document.querySelector("#split-horizontal-demo nve-resize-handle");
const split = document.querySelector("#split-horizontal-demo");
handle.addEventListener("input", (e) => (split.style.gridTemplateRows = "1fr auto " + e.target.value + "px"));
</script>
Split Vertical
Vertical split pane with draggable divider that adjusts left and right panel widths.
<section
id="split-vertical-demo"
style="
display: grid;
width: 250px;
height: 250px;
grid-template-columns: 1fr auto 1fr;
border: 1px solid var(--nve-ref-border-color);
"
>
<div style="background: hsla(0, 0%, 65%, 0.1)"></div>
<nve-resize-handle orientation="vertical" min="20" max="230" value="125" step="20"></nve-resize-handle>
<div></div>
</section>
<script type="module">
const handle = document.querySelector("#split-vertical-demo nve-resize-handle");
const split = document.querySelector("#split-vertical-demo");
handle.addEventListener("input", (e) => (split.style.gridTemplateColumns = e.target.value + "px auto 1fr"));
</script>
Resize handle as a form control with name attribute for submitting resize values.
<form id="form-demo" nve-layout="column gap:lg">
<section
style="
display: grid;
width: 250px;
height: 250px;
grid-template-rows: 1fr auto 1fr;
border: 1px solid var(--nve-ref-border-color);
"
>
<div></div>
<nve-resize-handle name="resize" min="20" max="230" value="125" step="20"></nve-resize-handle>
<div style="background: hsla(0, 0%, 65%, 0.1)"></div>
</section>
<nve-button>submit</nve-button>
</form>
<script type="module">
const form = document.querySelector("#form-demo");
const split = document.querySelector("#form-demo section");
const handle = document.querySelector("#form-demo nve-resize-handle");
form.addEventListener("submit", (e) => {
e.preventDefault();
console.log(Object.fromEntries(new FormData(form)));
console.log(handle.form);
});
handle.addEventListener("change", (e) => {
console.log("change", e.target.value);
});
handle.addEventListener("input", (e) => {
console.log("input", e.target.value);
split.style.gridTemplateRows = "1fr auto " + e.target.value + "px";
});
</script>
Line Width
Custom line width styling for resize handle visibility using CSS custom property.
<div style="height: 200px">
<nve-resize-handle orientation="vertical" style="--line-width: 6px"></nve-resize-handle>
</div>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs Preview
API Documentation
Fully Themeable
beta
Robust unit test coverages
Passed API Review
Passed Designer VQA Review
Included in library package
stable
No known outstanding AA WCAG issues
No known outstanding performance issues
Adapts to different screen/container sizes
No breaking API changes for at least 90 days