Blaze UI es un conjunto de herramientas de interfaz de usuario de código abierto gratuito que proporciona una base sólida y fácil de mantener para desarrollar soluciones web escalables. Todos los componentes de Blaze UI se desarrollan primero para dispositivos móviles y se basan en características nativas del navegador, no en ninguna biblioteca o marco adicional.
En este artículo, veremos los rangos básicos de Blaze UI . Los rangos son básicamente controles deslizantes que se utilizan para tomar la entrada de valor entre un rango definido. Para crear un rango de interfaz de usuario de Blaze, usamos el elemento <input> con clase c-range y el atributo de tipo establecido en range .
Clases de rangos básicos de Blaze UI:
- c-range: esta clase se usa para instanciar el elemento range de la interfaz de usuario de Blaze.
Sintaxis:
<input class="c-range" type="range">
Ejemplo 1: el siguiente ejemplo muestra cómo crear un rango básico en la interfaz de usuario de Blaze.
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">
<title>Blaze UI - Basic Range</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Basic Range - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<input type="range" class="c-range">
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/ranges/
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA