Adjust Input Values With Mouse Drag – side-slider

Preview:

Description:

side-slider is a JavaScript library that allows you to adjust the input values by dragging the sides of the input box.

The input value will decrement and increment based on the movement of the mouse over time.

Written in pure JavaScript and based on The Pointer Lock API.

How to use it:

1. Load the JavaScript sideslider.js in the HTML.

<script src="/dist/sideslider.js"></script>

2. Create a number input on the page.

<input type="number" id="example" />

3. Initialize the sideslider on the number input.

new SideSlider(document.getElementById('example'), {
    // options here
});

4. Set the min/max values allowed in the number input.

new SideSlider(document.getElementById('example'), {
    min: 0,
    max: 100
});

5. Set the step size. Default: 1.

new SideSlider(document.getElementById('example'), {
    step: 5
});

6. Set the width of the draggable area. Default: 4.

new SideSlider(document.getElementById('example'), {
    width: 5
});

7. Determine the number of pixels needed to adjust one step. Default: 4.

new SideSlider(document.getElementById('example'), {
    threshold: 5
});

8. Limit the acceleration of mouse movement. Default: 2.

new SideSlider(document.getElementById('example'), {
    maxMovementX: 3
});

9. Determine whether or not to update the target element. Default: true.

new SideSlider(document.getElementById('example'), {
    updateElement: false
});

});

10. Specify the drag direction. Default: ‘left’.

new SideSlider(document.getElementById('example'), {
    direction: 'right'
});

11. It also provides a function to format the output:

new SideSlider(document.getElementById('example'), {
    format: v => v.toFixed(0)
});

12. Trigger a function every time you change the value.

new SideSlider(document.getElementById('example'), {
    onChange: function (e) {
      // e.value : Current value.
      // e.prev: Previous value.
      // e.delta: Difference between the current and previous value.
      // e.slider: All configurations are stored in this object.
      // e.target: The target HTMLElement.
    },
});