DefaultDatalistDatalistWithStepsStepVerticalHorizontalOrientationVerticalOrientationVerticalDatalistCustomStyles
A range slider is a control that enables users to choose a value from a continuous range of values.
Range with datalist for visual tick marks and labeled values, enabling users to see available options and precisely select predetermined values.
Range with combined step increments and datalist labels, ensuring precise value selection with clear visual indicators at each valid step position.
Range with defined step increments for discrete value selection, constraining the slider to specific intervals for controlled input precision.
<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>
Edit Example 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 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>
Edit Example 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 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>
Edit Example Vertical range slider for space-constrained layouts or controls where bottom-to-top value selection is intuitive, such as volume or equalizer adjustments.
Orientation Vertical Datalist
<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>
Edit Example Vertical range slider with datalist tick marks and labeled values for precise value selection in vertical layouts.
Range component can have its visual styles overwritten to achieve custom themes.