Deep excavation, Html5 Range sliding scale pits, compatible with the full platform, will be wayward to the end!

The last 2 days have been a sliding scale effect, because the project is based on web app development, so consider the mobile and PC-side compatibility issues, consider more, try to use the HTML5 range to do, is now compatible with PC and mobile side!

The following results are achieved:

HTML5 Range, Cons:

----------------------------------------------------------------------------------------------

1: Currently tested (Chrome browser and iphone6 ) slide is not real-time change scale, do not know why, other platforms can

2: The first time after changing the value of Srcelement.value, will not take effect, you have to start the initiative.

HTML5 Range, advantages:

----------------------------------------------------------------------------------------------

1: can do very beautiful, do not consider the problem of real-time display

2: slide does not have to do, the range control native support, the other look at the rendered range is actually a Shadow Dom(Virtual dom tree), this is based on the Shaow Dom component development, feel awesome.

3: Range supports a number of personalized parameter settings (initial value: Value, min: Min, max: max)

Range Source,

----------------------------------------------------------------------------------------------

The following problems are encountered in the process :

----------------------------------------------------------------------------------------------

The question is, how do you click the value of control range and let it slide ?

Answer: change the srcelement.valuein the range changes event.  

An article on the range beautification share:

----------------------------------------------------------------------------------------------

Http://www.w3cplus.com/html5/styling-cross-browser-compatible-range-inputs-css.html

Deep excavation, Html5 Range sliding scale pits, compatible with the full platform, will be wayward to the end!