En este artículo, aprenderemos cómo incluir el rango en su página web utilizando el CSS de la interfaz de usuario de Onsen. Onsen UI CSS se utiliza para crear hermosos componentes HTML. Es una de las formas más eficientes de crear componentes híbridos HTML5 que son compatibles con dispositivos móviles y de escritorio.
Los componentes CSS de rango se utilizan para establecer el valor entre los valores inicial y final.
Sintaxis:
<element-name class="class-name">...<element-name>
Rango Clase de componentes CSS utilizada:
- range__input: esta clase se utiliza para crear una línea de rango en la que se ejecutará el anillo desde el punto inicial hasta el punto final.
- range__focus-ring: esta clase se usa para crear un anillo al hacer clic en este anillo, el usuario podrá establecer el rango.
Ejemplo 1: en el siguiente código, veremos cómo incluir el rango en la página web.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsenui.css" />
<link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" />
<script src="https://unpkg.com/onsenui/js/onsenui.min.js">
</script>
<style>
body {
background-color: lightgrey;
}
#heading {
color: green;
}
#title {
font-style: bold;
}
</style>
</head>
<body>
<center>
<h1 id="heading">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
<strong id="title">
Onsen UI CSS Component
</strong>
<br><br>
<div class="range">
<input type="range" class="range__input">
<input type="range" class="range__focus-ring">
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente código, veremos cómo incluir el rango en la página web, pero no se moverá porque usaremos la propiedad de deshabilitación para deshabilitar el rango.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsenui.css" />
<link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" />
<script src="https://unpkg.com/onsenui/js/onsenui.min.js">
</script>
<style>
body {
background-color: lightgrey;
}
#heading {
color: green;
}
#title {
font-style: bold;
}
</style>
</head>
<body>
<center>
<h1 id="heading">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
<strong id="title">
Onsen UI CSS Component
</strong>
<br><br>
<div class="range">
<input type="range" class="range__input" disabled>
<input type="range" class="range__focus-ring" disabled>
</div><br><br>
<div class="range">
<input type="range" class="range__input">
<input type="range" class="range__focus-ring">
</div>
</center>
</body>
</html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#range-category
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA