To use the range component import the component in your JavaScript.

import '@cds/core/range/register.js';

Range

range message text

       <cds-range>
    <label>range</label>
    <input type="range" />
    <cds-control-message>message text</cds-control-message>
</cds-range>
      

Vertical

label message text disabled disabled message error error message success success message

       <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>
      

Horizontal

label message text disabled disabled message error error message success success message

       <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>
      

Compact

label message text disabled disabled message error error message success success message

       <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>
      

MinMax

min/max/step message text

       <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>
      

DarkTheme

label message text disabled disabled message error error message success success message

       <cds-form-group layout="horizontal" cds-theme="dark">
    <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>