A range slider is a control that enables users to choose a value from a continuous range of values.
Installation
<script type="module">
import '@nvidia-elements/core/range/define.js';
</script>
<nve-range>
<label>label</label>
<input type="range" />
<nve-control-message>message</nve-control-message>
</nve-range>
<script type="module">
import '@nvidia-elements/core/range/define.js';
</script>
<nve-range>
<label>label</label>
<input type="range" />
<nve-control-message>message</nve-control-message>
</nve-range>
nve api.get nve-range
nve api.get nve-range
Datalist
Step
Datalist With Steps
Layout
Controls the directional arrangement and spacing behavior of the element's content.
Layout Description vertical Arranges content in a vertical stack with block-level spacing. vertical-inline Arranges content vertically with compact inline spacing for dense layouts. horizontal Arranges content in a horizontal row with block-level spacing. horizontal-inline Arranges content horizontally with compact inline spacing. Vertical
Vertical layout configuration for stacked form arrangements, displaying label, slider, and message in a column format with support for states including disabled, success, and error feedback.
<div nve-layout="column gap:lg full">
<nve-range>
<label>label</label>
<input type="range" />
<nve-control-message>message</nve-control-message>
</nve-range>
<nve-range>
<label>disabled</label>
<input type="range" disabled />
<nve-control-message>message</nve-control-message>
</nve-range>
<nve-range>
<label>success</label>
<input type="range" />
<nve-control-message status="success">message</nve-control-message>
</nve-range>
<nve-range>
<label>error</label>
<input type="range" />
<nve-control-message status="error">message</nve-control-message>
</nve-range>
</div>
<div nve-layout="column gap:lg full">
<nve-range>
<label>label</label>
<input type="range" />
<nve-control-message>message</nve-control-message>
</nve-range>
<nve-range>
<label>disabled</label>
<input type="range" disabled />
<nve-control-message>message</nve-control-message>
</nve-range>
<nve-range>
<label>success</label>
<input type="range" />
<nve-control-message status="success">message</nve-control-message>
</nve-range>
<nve-range>
<label>error</label>
<input type="range" />
<nve-control-message status="error">message</nve-control-message>
</nve-range>
</div>
Horizontal
Horizontal layout configuration for inline form arrangements, positioning label and slider side-by-side for compact displays with support for states including disabled, success, and error feedback.
<div nve-layout="column gap:lg full">
<nve-range layout="horizontal">
<label>label</label>
<input type="range" />
<nve-control-message>message</nve-control-message>
</nve-range>
<nve-range layout="horizontal">
<label>disabled</label>
<input type="range" disabled />
<nve-control-message>message</nve-control-message>
</nve-range>
<nve-range layout="horizontal">
<label>success</label>
<input type="range" />
<nve-control-message status="success">message</nve-control-message>
</nve-range>
<nve-range layout="horizontal">
<label>error</label>
<input type="range" />
<nve-control-message status="error">message</nve-control-message>
</nve-range>
</div>
<div nve-layout="column gap:lg full">
<nve-range layout="horizontal">
<label>label</label>
<input type="range" />
<nve-control-message>message</nve-control-message>
</nve-range>
<nve-range layout="horizontal">
<label>disabled</label>
<input type="range" disabled />
<nve-control-message>message</nve-control-message>
</nve-range>
<nve-range layout="horizontal">
<label>success</label>
<input type="range" />
<nve-control-message status="success">message</nve-control-message>
</nve-range>
<nve-range layout="horizontal">
<label>error</label>
<input type="range" />
<nve-control-message status="error">message</nve-control-message>
</nve-range>
</div>
Orientation
Controls the directional flow of the element's layout and interaction pattern.
Orientation Description vertical Element orients vertically with top-to-bottom flow. horizontal Element orients horizontally with left-to-right flow. Vertical
Vertical range slider for space-constrained layouts or controls where bottom-to-top value selection is intuitive, such as volume or equalizer adjustments.
<div style="height: 200px">
<nve-range orientation="vertical">
<label>label</label>
<input type="range" />
<nve-control-message>message</nve-control-message>
</nve-range>
</div>
<div style="height: 200px">
<nve-range orientation="vertical">
<label>label</label>
<input type="range" />
<nve-control-message>message</nve-control-message>
</nve-range>
</div>
Vertical Datalist
Vertical range slider with datalist tick marks and labeled values for precise value selection in vertical layouts.
<div style="height: 250px">
<nve-range orientation="vertical">
<label>label</label>
<input type="range" />
<datalist>
<option value="0">0</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
</datalist>
</nve-range>
</div>
<div style="height: 250px">
<nve-range orientation="vertical">
<label>label</label>
<input type="range" />
<datalist>
<option value="0">0</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
</datalist>
</nve-range>
</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