To use the range component import the component in your JavaScript.
import '@cds/core/range/register.js';
<cds-range> <label>range</label> <input type="range" /> <cds-control-message>message text</cds-control-message> </cds-range>
<cds-form-group layout="vertical"> <cds-range layout="vertical"> <label>label</label> <input type="range" /> <cds-control-message>message text</cds-control-message> </cds-range> <cds-range layout="vertical"> <label>disabled</label> <input type="range" disabled /> <cds-control-message>disabled message</cds-control-message> </cds-range> <cds-range layout="vertical" status="error"> <label>error</label> <input type="range" /> <cds-control-message status="error">error message</cds-control-message> </cds-range> <cds-range layout="vertical" status="success"> <label>success</label> <input type="range" /> <cds-control-message status="success">success message</cds-control-message> </cds-range> </cds-form-group>
<cds-form-group layout="horizontal"> <cds-range layout="horizontal"> <label>label</label> <input type="range" /> <cds-control-message>message text</cds-control-message> </cds-range> <cds-range layout="horizontal"> <label>disabled</label> <input type="range" disabled /> <cds-control-message>disabled message</cds-control-message> </cds-range> <cds-range layout="horizontal" status="error"> <label>error</label> <input type="range" /> <cds-control-message status="error">error message</cds-control-message> </cds-range> <cds-range layout="horizontal" status="success"> <label>success</label> <input type="range" /> <cds-control-message status="success">success message</cds-control-message> </cds-range> </cds-form-group>
<cds-form-group layout="compact"> <cds-range layout="compact"> <label>label</label> <input type="range" /> <cds-control-message>message text</cds-control-message> </cds-range> <cds-range layout="compact"> <label>disabled</label> <input type="range" disabled /> <cds-control-message>disabled message</cds-control-message> </cds-range> <cds-range layout="compact" status="error"> <label>error</label> <input type="range" /> <cds-control-message status="error">error message</cds-control-message> </cds-range> <cds-range layout="compact" status="success"> <label>success</label> <input type="range" /> <cds-control-message status="success">success message</cds-control-message> </cds-range> </cds-form-group>
<cds-range> <label>min/max/step</label> <input type="range" min="20" max="80" step="10" value="40" /> <cds-control-message>message text</cds-control-message> </cds-range>