Cylinder picker

Sample page

Link

Install

npm

npm i cylinder-picker

cdn

<script src="https://unpkg.com/cylinder-picker@latest/dist/index.umd.js"></script>

Report errors and suggestions

Gmail

Change log

| Version | Log | |---------|------------------------------------------------------------------------------| | 1.0.0 | Release | | 1.0.67 | Correction of UI errors on a cylinder-picker with a large amount of elements | | 1.0.75 | Improve the experience of using Touch-pan gestures |

Usage

Add the custom element to your HTML file:

default

<cylinder-picker>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</cylinder-picker>

with infinity scroll

<cylinder-picker infinite>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</cylinder-picker>

with disabled

<cylinder-picker disabled>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</cylinder-picker>

with curvature

<cylinder-picker curvature="25">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</cylinder-picker>

Properties

The HTMLCylinderPicker class comes with several properties that can be both retrieved and set, allowing for customization and dynamic interaction.

List set

Sets the list of items to be displayed in the picker.

const picker = document.querySelector('cyliner-picker');
picker.list = ["Item 1", "Item 2", "Item 3"]; // set

Value get set

The index of the currently selected item.

const picker = document.querySelector('cyliner-picker');
picker.value = 3; // set
console.log(picker.value); // get

• This example sets the value of the cylinder-picker to the third index.

ElementValue get

The HTMLLIElement corresponding to the current value.

const picker = document.querySelector('cyliner-picker');
console.log(picker.elementValue); // get

Curvature get set

Adjusts the curvature of the cylinder. default: 20

const picker = document.querySelector('cyliner-picker');
picker.curvature = 25; // set
console.log(picker.curvature); // get

Infinite get set

Enables infinite scrolling. default: false

const picker = document.querySelector('cyliner-picker');
picker.infinite = true; // set
console.log(picker.infinite); // get

Disabled get set

Disables user interaction with the picker. default: false

const picker = document.querySelector('cyliner-picker');
picker.disabled = true; // set
console.log(picker.disabled); // get

InertiaPanCallback set

Sets a callback function to be executed during inertia scrolling.

const picker = document.querySelector('cyliner-picker');
picker.inertiaPanCallback = () => {
    console.log(picker.value);
}; // set

• This example outputs the value of the cylinder-picker when the pan gesture inertia of the cylinder-picker ends.

Length get

Length of elements in the cylinder-picker.

const picker = document.querySelector('cyliner-picker');
console.log(picker.length); // get

IsAnimating get

The cylinder-picker is currently animated.

const picker = document.querySelector('cyliner-picker');
console.log(picker.isAnimating); // get

Methods

stopInertia()

Stops any ongoing inertia scrolling.

const picker = document.querySelector('cyliner-picker');
await picker.stopInertia();

Events

The HTMLCylinderPicker dispatches a custom event change when the selected item changes. You can listen for this event as follows:

const picker = document.querySelector('cyliner-picker');
picker.addEventListener('change', (event) => {
    console.log('New value:', event.detail.value);
});

Interaction Capabilities

The HTMLCylinderPicker allows users to interact with it through various input methods:

Mouse Wheel

Users can scroll through the picker items using the mouse wheel.

Touch Pan Gesture / Mouse Pan Gesture

Touch pan or mouse pan gestures, such as swiping up and down on touch-enabled devices, can be used to navigate through the picker items.

Touch / Click

Touching or clicking an item directly will select that item.

These interactions are designed to provide a seamless and intuitive experience across different devices and input methods.