Las barras deslizantes de Spectre se utilizan para crear barras de progreso en el modo deslizante.
Puede agregar la clase barra deslizante al contenedor Barras. Agregue elementos secundarios con la clase bar-item y agregue la clase bar-slider-btn para el botón dentro de div con la clase bar-item . También debe agregar el ancho del elemento de la barra manualmente para establecer el punto del control deslizante.
Si hay dos div con elemento de barra de clase en un control deslizante de barra, puede tener un control deslizante de rango.
Clase de barras deslizantes Spectre:
- bar: Esta clase se utiliza para crear una barra.
- bar-slider: Esta clase se utiliza para crear la barra en modo slider.
- bar-item: esta clase se utiliza para establecer el elemento secundario.
- bar-slider-btn: esta clase se utiliza para configurar el control deslizante de la barra de botones.
Sintaxis:
<div class="bar bar-slider">
<div class="bar-item">
<button class="bar-slider-btn btn">
....
</button>
</div>
</div>
Ejemplo: En este ejemplo, usaremos dos barras deslizantes, una con un rango y otra será la barra deslizante normal. Estas barras no son respuestas.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
.bar {
margin-left: 15%;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Slider bars Class</strong>
</center>
<br>
<strong>Range Slider Bars:</strong>
<div class="bar bar-slider">
<div class="bar-item"
style="width:10%;">
<button class="bar-slider-btn btn">
<br>Minimum
</button>
</div>
<div class="bar-item"
style="width:75%;">
<button class="bar-slider-btn btn">
<br>Maximum
</button>
</div>
</div>
<br>
<strong>Slider Bars:</strong>
<div class="bar bar-slider">
<div class="bar-item"
style="width:75%;">
<button class="bar-slider-btn btn">
<br>75%
</button>
</div>
</div>
</body>
</html>
Producción:
Barras deslizantes Spectre
Referencia: https://picturepan2.github.io/spectre/components/bars.html#bars-slider
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA