Vanilla JS Wheel Number Picker

A small plug-and-play ready, wheel-style number picker in plain JavaScript. No framework required.

CDN usage

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/vanilla-wheel-number-picker@LATEST_VERSION/dist/wheel-number-picker.css"
/>
<script src="https://cdn.jsdelivr.net/npm/vanilla-wheel-number-picker@LATEST_VERSION/dist/wheel-number-picker.min.js"></script>

<wheel-number-picker
  min="0"
  max="99"
  value="25"
  item-height="56"
  visible-items="3"
  color="#111827"
  muted-color="#9ca3af"
  active-color="#2563eb"
  background="#f8fafc"
  arrows-min-width="900"
>
</wheel-number-picker>

<script>
  const picker = document.querySelector("wheel-number-picker");

  picker.addEventListener("change", (event) => {
    console.log(event.detail.value);
  });

  console.log(picker.value);
  picker.value = 42;
</script>

Class usage

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/vanilla-wheel-number-picker@LATEST_VERSION/dist/wheel-number-picker.css"
/>
<script src="https://cdn.jsdelivr.net/npm/vanilla-wheel-number-picker@LATEST_VERSION/dist/wheel-number-picker.min.js"></script>

<div id="agePicker"></div>

<script>
  const picker = new WheelNumberPicker("#agePicker", {
    min: 18,
    max: 100,
    value: 30,
    itemHeight: 56,
    visibleItems: 3,
    color: "#111827",
    mutedColor: "#9ca3af",
    activeColor: "#2563eb",
    background: "#f8fafc",
    arrowsMinWidth: 900,
    onChange(value) {
      console.log(value);
    },
  });
</script>

Options / attributes

| Option | Attribute | Default | Description | | ---------------- | ------------------ | -------: | -------------------------------------------------------------------------------------------------------------------------------- | | min | min | 0 | Minimum value | | max | max | 100 | Maximum value | | value | value | min | Initial/current value | | itemHeight | item-height | 44 | Row height in pixels. Controls row height, highlight height, snap distance, and total picker height. | | visibleItems | visible-items | 5 | Number of visible rows. Even numbers are rounded up to the next odd number so one row can stay centered. | | color | color | #111 | Base/active text color fallback | | mutedColor | muted-color | #aaa | Non-selected item text color | | activeColor | active-color | color | Selected item text color | | background | background | gradient | Picker window background. Accepts any valid CSS background value. | | arrowsMinWidth | arrows-min-width | none | Optional desktop breakpoint in pixels. When set, minimal arrow controls appear on the right side at this screen width and wider. |

Dynamic updates

These attributes can be changed after the component is mounted:

const picker = document.querySelector("wheel-number-picker");

picker.setAttribute("item-height", "64");
picker.setAttribute("visible-items", "3");
picker.setAttribute("active-color", "crimson");
picker.setAttribute("background", "#fff7ed");
picker.setAttribute("arrows-min-width", "900");

The component recalculates its render dimensions and snapping math automatically.

Styling with CSS variables

You can also style with CSS variables:

wheel-number-picker {
  --wnp-color: #111827;
  --wnp-active-color: #2563eb;
  --wnp-muted-color: #9ca3af;
  --wnp-background: #f8fafc;
  --wnp-arrow-size: 24px;
  --wnp-arrow-gap: 8px;
  --wnp-arrow-color: #6b7280;
  --wnp-arrow-hover-color: #1d4ed8;
  --wnp-arrow-font-size: 12px;
  --wnp-arrow-opacity: 0.6;
}

Misalignment issues may occur if you style --wnp-height without adjusting visible-items and item-height properties of the component accordingly.

Local demo

Open demo/index.html in a browser.