Wheel — Loopem

A drum. Rows curve away from you over the top and bottom of a cylinder, and fade out at the horizon. This is the shape people mean when they say “date picker”.

wheel({ spacing: 46, radius: 160 })

import { createPicker } from 'loopem'
import { wheel } from 'loopem/layouts'

createPicker(el, {
  items,
  renderItem,
  ...wheel(),
})

It sets axis: 'vertical' itself. The demo above widens the defaults for its 40px rows.

Tuning it

Option	Default	What it does
`spacing`	`36`	Pixels between one row and the next.
`radius`	`130`	Radius of the cylinder. Larger is flatter.
`horizon`	`88`	Degrees at which a row has turned fully away and gone.
`perspective`	`520`	Distance to the vanishing point.

Several at once

Three drums beside each other is a date and time. They are three separate pickers; nothing coordinates them but your own state.

const wheels = ['day', 'hour', 'minute'].map((name) =>
  createPicker(document.getElementById(name), {
    items: values[name],
    renderItem: (value) => row(value),
    ...wheel({ spacing: 34 }),
    loop: name === 'day' ? 'clamp' : 'wrap',
  }),
)

A day column wants loop: 'clamp', because dates have a first and a last. Hours and minutes wrap.

See it running in the date-picker example.