Duration picker
Hours, minutes and seconds as three small fields that move on as you type.
Timer
<fieldset class="mn-fieldset" style="border:0;padding:0;margin:0"><legend class="mn-label" style="margin-bottom:.5rem">Simmer for</legend>
<div class="mn-duration" data-mn-duration>
<div class="mn-duration-part"><input id="du-h" type="number" min="0" max="23" value="0" data-unit="h"><label for="du-h">Hours</label></div><span class="mn-duration-sep" aria-hidden="true">:</span>
<div class="mn-duration-part"><input id="du-m" type="number" min="0" max="59" value="18" data-unit="m"><label for="du-m">Minutes</label></div><span class="mn-duration-sep" aria-hidden="true">:</span>
<div class="mn-duration-part"><input id="du-s" type="number" min="0" max="59" value="30" data-unit="s"><label for="du-s">Seconds</label></div>
</div></fieldset>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/duration-picker.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-duration | The group. Add data-mn-duration. |
| mn-duration-part | One field with its label under it. |
| data-unit | On each input: h, m or s. |
| mn-duration-sep | The colon between parts. |
Accessibility
- Each part is a labelled number input with its own range.
- Put the group in a <fieldset> with a <legend> that says what the duration is for.
- Typing two digits moves to the next part; arrow keys step the value.
- Listen for mn:change; detail has seconds and text.