js implements the finger sliding scale function on the mobile H5 page

I wrote a sliding scale for use on the mobile terminal. I have seen it in the native App before and it was very detailed. Now it is implemented on the web page;

The implementation effect is as follows: (See the source code at the end of the article)

Encapsulated into directly usable MeasureRuler.js

Calling method:

 //Initialize the ruler var measureRuler =new MeasureRuler({ wrapperId:rulerWrapper, //Container ID, just write a DIV on the page (required) max:2000, //The maximum scale of the scale (not required, the default is 2000) minUnit: 1, //The minimum scale of the scale (optional, the default is 1) unitSet:10, //The length of the scale unit (optional, the default is 10) value:5, //Initialization value (optional, default is 1) mult:1, //Scale value multiple, the default is the minimum scale value is 10px, if mult is set to 3, the minimum scale is 30px (optional, the default is 1) callback: rulerSetValue //Callback function during sliding ruler (not required) })

Assign a value to the scale

 //Assign the scale value to 3 measureRuler.setValue(3)

Switch the scale status to meet different measurement ranges and redraw the scale

 //Reset new parameters var nParam={ max:5, minUnit:0.5, unitSet:2, mult:3, value:1.5 } //Redraw the graph measureRuler.reDrawRuler(nParam);

GitHub source code sharing: (If you find it useful, remember to give it a star)

https://github.com/xingxiaoyiyio/h5-ruler/tree/master

The component uses touch events to capture the sliding range, but when the minimum scale is 1, that is, each scale is 10px, the small range sliding is not accurate, and you need to slide back and forth carefully before you can slide to the scale point you slide to;

The above is the js introduced by the editor to implement the finger sliding scale function on the mobile H5 page. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!