Home > Web Front-end > H5 Tutorial > body text

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

WBOY
Release: 2016-05-16 15:47:35
Original
2033 people have browsed it

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.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template