Native like time-picker for Svelte

View the demo.

Installation

npm i -D svelte-touch-timepicker

Usage

<script>
  import TimePicker  from "svelte-touch-timepicker"; // 4.38kb gzipped

  let time = new Date();
  $: _time = time.toLocaleTimeString("en-US");

</script>

<style>

  .container{
    height: 100%;
    width: 100%;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font: 20px 'Roboto', sans-serif;
  }
</style>

<div class="container" >
  <div class="center">
    <p>Time: {_time}</p>
    <TimePicker bind:time />
  </div>
</div>

Default css custom properties

  :root{
    --svtt-popup-bg-color: white;
    --svtt-popup-color: black;
    --svtt-popup-radius: 10px;
    --svtt-font-size: 20px;
    --svtt-button-color: black;
    --svtt-button-bg-color: transparent;
    --svtt-border: 1px solid grey;
    --svtt-button-box-shadow: none;
    --svtt-bar-color: grey;
  }

Props