material-inspired-component-library
Version:
The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.
110 lines (107 loc) • 4.66 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MICL Sliders</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,volume_up&display=block">
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
<link rel="stylesheet" href="micl.css">
<link rel="stylesheet" href="docs.css">
<style>
.micl-card__content {
display: flex;
flex-direction: column;
row-gap: 64px;
padding-block: 64px;
background-color: inherit;
}
.micl-card-filled .micl-card__content {
align-items: center;
}
.micl-card-elevated input[type=range] {
width: 100%;
}
.micl-card-filled input[type=range] {
height: 360px;
}
</style>
</head>
<body class="light">
<div class="headline">
<h1 class="md-sys-typescale-emphasized-display-small">Sliders</h1>
<div id="settings-placeholder"></div>
</div>
<div class="cards">
<div class="micl-card-elevated">
<div class="micl-card__content">
<input type="range" class="micl-slider-xs" min="1" max="10" value="6">
<input type="range" class="micl-slider-s" min="0" max="100" value="25" step="25" list="markers1">
<datalist id="markers1">
<option value="0"></option>
<option value="25"></option>
<option value="50"></option>
<option value="75"></option>
<option value="100"></option>
</datalist>
<div class="range micl-slider__container">
<span class="micl-slider__icon material-symbols-outlined">volume_up</span>
<input type="range" class="micl-slider-m" min="3.5" max="12.5" value="9.5" step="0.5">
</div>
<input type="range" class="micl-slider-l" value="0">
<input type="range" class="micl-slider-xl" disabled>
</div>
</div>
<div class="micl-card-filled">
<div class="micl-card__content">
<input type="range" class="micl-slider-xl micl-slider--vertical">
</div>
</div>
<div class="micl-card-elevated">
<div class="micl-card__headline-s">
<h2>Gecko browsers</h2>
</div>
<div class="micl-card__content">
<div class="micl-slider__container">
<input type="range" class="micl-slider-xs" min="1" max="10" value="6">
</div>
<div class="micl-slider__container">
<input type="range" class="micl-slider-s" min="0" max="100" value="25" step="25" list="markers2">
</div>
<datalist id="markers2">
<option value="0"></option>
<option value="25"></option>
<option value="50"></option>
<option value="75"></option>
<option value="100"></option>
</datalist>
<div class="micl-slider__container">
<span class="micl-slider__icon material-symbols-outlined">volume_up</span>
<input type="range" class="micl-slider-m" min="3.5" max="12.5" value="9.5" step="0.5">
</div>
<div class="micl-slider__container">
<input type="range" class="micl-slider-l" value="0">
</div>
<div class="micl-slider__container">
<input type="range" class="micl-slider-xl" disabled>
</div>
</div>
</div>
<div class="micl-card-filled">
<div class="micl-card__headline-s">
<h2>Gecko browsers</h2>
</div>
<div class="micl-card__content">
<div class="micl-slider__container">
<input type="range" class="micl-slider-xl micl-slider--vertical">
</div>
</div>
</div>
</div>
<script src="micl.js"></script>
<script src="docs.js"></script>
</body>
</html>