<script>
import Seconds from './Seconds.svelte'
let duration = 20500
let position = 3400
</script>
<div>
<h1>Duration display example</h1>
<label>
Position
<input bind:value={position} type="number"/>
</label>
<label>
Duration
<input bind:value={duration} type="number"/>
</label>
<div class="container">
<Seconds value={position}/> / <Seconds value={duration}/>
</div>
</div>
<style>
.container {
margin: 2rem 0;
display: inline-block;
background: #e5e5e5;
padding: 0.5rem;
border-radius: 3px;
font-family: monospace;
color: #444;
}