First, the final implementation diagram
To implement this function, a library found on github called slide-ruler address is used.
Implementation ideas:
Step 1: Download this dependency in terminal npm
Step 2: Create a new scale custom component. If it is not a custom component, it will not take effect. And put an empty div in this custom component, which must be exactly the same as in the document.
Step 3: It is recommended to read this Chinese document to view the configuration items
The following are the configuration items used in my project:
Difficulties encountered: Because the project requirement is to not only slide the interaction, but also have a plus and minus button. After checking the source code, it was found that the new SlideRuler is received with a variable, and then through this variable, the methods in the class can be accessed. , the key class method is the drawCanvas method, so after I click the add and subtract button, in addition to adding and subtracting the value, I need to reassign the added, added, and subtracted value to the currentValue of the option, and then call drawCanvas to re-render the canvas. . Below is the code
