Coming soon: <rangegroup>

A new ele­ment is slow­ly mak­ing its way into browsers, native­ly sup­port­ing mul­ti-han­dle range sliders.

There’s more infor­ma­tion in the Chromi­um Groups. But there’s been great work by Util­i­ty­bend and Open UI in putting togeth­er a native UI com­po­nent that vir­tu­al­ly every design sys­tem attempts to build.

An exam­ple of how this could look in HTML 

<rangegroup>
    <legend>Temperature Range</legend>
    <label>
        Minimum Temperature
        <input type="range" name="temp-min" value="-25" />
    </label>
    <label>
        Maximum Temperature
        <input type="range" name="temp-max" value="15" />
    </label>
</rangegroup>

The community has spoken, now we need browsers vendors to help: a <rangegroup> update