Draggable & Touch-enabled Input/Select Spinner In Vanilla JavaScript – tirette.js

Preview:

Description:

The tirette.js JavaScript library helps you create an input spinner where you can increase & decrease values by using drag event on desktop or mobile device.

Also support select element that makes it easier to switch between options with drag event.

How to use it:

Import the JavaScript tirette.js and Stylesheet tirette.css into the document.

<link rel="stylesheet" href="tirette.css">
<script src="tirette.js"></script>

Add the CSS class tirette to the targer number input or select element. Done.

<input type="number" class="tirette" placeholder="Drag --->" aria-label="Type Something">

<select aria-label="select" class="tirette">
  <option value="">--Choose An Option--</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Use the accurarcy attribute to manage the accuracy of the spinner.

<select aria-label="select" class="tirette" accuracy="20">
  <option value="">--Choose An Option--</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>