Create Side Sliders Input Values Using Mouse Drag

HTML Range Slider, a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API.

Side slider is a JavaScript library that allows you to adjust input values by dragging the sides of the input box. The input value will decrease and increase based on the movement of the mouse over time.

How to make use of it:

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

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

2. Create a number of input on the web page.

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

3. Initialize the side slider on the number input.

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

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

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

5. Set the step size.

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

6. Set the width of the draggable area.

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

7. Determine the variety of pixels that needed to adjust one step.

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

8. Limit the acceleration of the mouse movement.

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

9. Determine whether or not or to not update the target aspect.

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

10. Specify the drag path.

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

11. It additionally offers a function to format the output:

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

12. Trigger a function each time you modify 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.
    },
});

Adjust Input Values With Mouse Drag, HTML range slider with labels, Side Slider Plugin/Github