Version:

Install ​

shell
npm i @vaadin/custom-field

Import ​

javascript
import '@vaadin/custom-field';

Variants ​

Text ​

html
<vaadin-custom-field theme="range-selector">
    <vaadin-text-field label="Start"></vaadin-text-field>
    <vaadin-text-field label="End"></vaadin-text-field>
</vaadin-custom-field>

Date Picker ​

html
<vaadin-custom-field theme="range-selector">
    <vaadin-date-picker label="Start"></vaadin-date-picker>
    <vaadin-date-picker label="End"></vaadin-date-picker>
</vaadin-custom-field>

Time Picker ​

html
<vaadin-custom-field theme="range-selector">
    <vaadin-time-picker label="Start"></vaadin-time-picker>
    <vaadin-time-picker label="End"></vaadin-time-picker>
</vaadin-custom-field>

Combo Box ​

html
<vaadin-custom-field theme="range-selector">
    <vaadin-combo-box label="Start"></vaadin-combo-box>
    <vaadin-combo-box label="End"></vaadin-combo-box>
</vaadin-custom-field>