1 | <!DOCTYPE html> |
2 | <html lang="es"> |
3 | |
4 | <head> |
5 | <meta charset="UTF-8"> |
6 | <meta name="viewport" |
7 | content="width=device-width"> |
8 | |
9 | <title> |
10 | Sliders - PWA con MD |
11 | </title> |
12 | |
13 | <meta name="theme-color" |
14 | content="#fffbfe"> |
15 | <link rel="icon" sizes="32x32" |
16 | href="favicon.ico"> |
17 | <link rel="manifest" |
18 | href="site.webmanifest"> |
19 | |
20 | <link rel="stylesheet" |
21 | href="css/estilos.css"> |
22 | <script |
23 | src="ungap/custom-elements.js"> |
24 | </script> |
25 | <script type="module" |
26 | src="js/configura.js"></script> |
27 | |
28 | </head> |
29 | |
30 | <body> |
31 | |
32 | <md-top-app-bar> |
33 | |
34 | <h1>Sliders</h1> |
35 | |
36 | <button is="md-menu-button" |
37 | slot="navigation" |
38 | onclick="nav.abre()"></button> |
39 | |
40 | </md-top-app-bar> |
41 | |
42 | <main> |
43 | |
44 | <md-slider-field> |
45 | <label>Rango</label> |
46 | <input type="range" |
47 | slot="slider" min="1" |
48 | max="10"> |
49 | <small slot="supporting"> |
50 | Calcúlalo bien |
51 | </small> |
52 | </md-slider-field> |
53 | |
54 | </main> |
55 | |
56 | <nav-drw id="nav"></nav-drw> |
57 | |
58 | </body> |
59 | |
60 | </html> |
Los sliders en Material Design están definidos en https://m3.material.io/components/sliders/overview.