DOCSEARCHbyAlgolia
Submit Docs

Spin Wheel

repository·main·Indexed 43 days ago

https://github.com/crazytim/spin-wheel

A lightweight, dependency-free, and themeable Vanilla JavaScript component for creating interactive spinning wheels to randomize choices and prizes. Version 5.0.2 supports responsive layouts, momentum-based or targeted animations via spinToItem(), and custom item weights and visuals.

Tokens
5.9K
Snippets
20
Records
33
Agent score
55%

What's inside Spin Wheel

  1. Draw a custom pointer

    main
    The Wheel component does not include a built-in pointer. Instead, you must track the Wheel.pointerAngle and render your own pointer. You can overlay an image using Wheel.overlayImage or use standard DOM elements to draw a pointer at the correct angle.

  2. Configure Wheel properties (Percentages vs Pixels)

    main

    The wheel is responsive and resizes to its container. Configuration properties use two different units:

    • Percentage properties: Expressed as a fraction of the container size (e.g., Wheel.radius = 0.9 fills 90% of the container).
    • Pixel properties: Relative to a reference container size of 500px (e.g., Wheel.LineWidth = 1 is 1px when the container is 500px wide).

  10. Initialize a new Wheel

    main

    To create a wheel, define an items array in a configuration object, select a container element from the DOM, and instantiate the Wheel class.

    // 1. Configure the wheel's properties:
const props = {
  items: [
    {
      label: 'one',
    },
    {
      label: 'two',
    },
    {
      label: 'three',
    },
  ]
}

// 2. Decide where you want it to go:
const container = document.querySelector('.wheel-container');

// 3. Create the wheel in the container and initialise it with the props:
const wheel = new Wheel(container, props);

  11. Initialize the Wheel class

    main

    To create a new spin wheel, instantiate the Wheel class by passing a container Element and an optional props object. The wheel will automatically append a canvas to the container and initialize its properties.

    Parameters:

    • container: An Element where the wheel will be rendered.
    • props: An Object containing configuration properties or null to use defaults.

    Note: If you change properties that affect the wheel's size or position after initialization, you should call resize() to update the canvas dimensions and internal calculations.

    const container = document.getElementById('wheel-container');
const props = {
  items: [{ label: 'Prize 1' }, { label: 'Prize 2' }],
  isInteractive: true
};
const wheel = new Wheel(container, props);

  12. Handle Wheel events

    main

    The Wheel instance emits several events that allow you to react to user interaction and animation states.

    onCurrentIndexChange(event)

    Raised when the pointer moves over a new item. Useful for playing sounds or updating UI.

    • type: 'currentIndexChange'
    • currentIndex: The index of the item currently under the pointer.

    onRest(event)

    Raised when the wheel stops spinning.

    • type: 'rest'
    • currentIndex: The index of the item the pointer is pointing at.
    • rotation: The final rotation of the wheel.

    onSpin(event)

    Raised when a spin is initiated.

    • type: 'spin'
    • duration: Animation duration (only for spinto or spintoitem methods).
    • method: The method used ('interact', 'spin', 'spinto', or 'spintoitem').
    • rotationResistance: The value of Wheel.rotationResistance at the time of the event (only for 'interact' or 'spin').
    • rotationSpeed: The value of Wheel.rotationSpeed at the time of the event (only for 'interact' or 'spin').
    • targetItemIndex: The index the pointer will land on (only for spintoitem).
    • targetRotation: The final rotation value (only for spinto or spintoitem).