ranger (range picker)

usage in three steps

1. add link to head for styles

<link rel="stylesheet" href="https://unpkg.com/nanocal-ranger/dist/ranger.min.css">

2. add div to body (yes I'm thinking about custom-elements, hopefully soon)

<div id="ranger"></div>

3. add script

<script type="module">
  import Ranger from 'https://unpkg.com/nanocal-ranger?module'
  const ranger = new Ranger({ target: document.querySelector('#ranger') })
</script>

see doc/options

usage with npm and your own build pipeline

npm install nanocal-ranger

const Ranger = require('nanocal-ranger')
// or
import Ranger from 'nanocal-ranger'

For more detailed examples how to use nanocal with vue or react, see examples.

customize styles

see doc/styles