Usage record of the new input attribute range in html5_html5 tutorial skills

After two days of living without a computer, TV, or mobile phone data, I was used to such a noisy rhythm. Returning to such a clean environment was no more than a wash. At the same time, I felt a little scared, as if I didn't know anything. If I leave this civilized society, it can even be said that I don’t even have the basic ability to survive. If I go back to the past, I don’t know how long I can live.

I feel very emotional. The current work needs to be completed. Record a new input attribute in HTML5, range. I found this attribute in the color palette of a website. It felt more visual and nice, so I recorded it:

Copy code

The code is as follows:

The display effect is as follows:



Here we see the two attributes min and max of type, the minimum allowed range and maximum range. At the same time, we can also style this range

Copy the code

The code is as follows:

The display effect is as follows:



This way we write A js method to change the value, this is how it is applied in the color palette: (I don’t know how the style of the moving button has changed yet)

Copy Code

The code is as follows:

In this way, the value in the input box changes as the dragging position changes. If you place three of them, you can generate a color. This is the principle of the color palette

Here’s more Note that the other two attributes of range, value, default value and step change range

The color palette looks good, I will check it out later, and go to bed now.