This article gives you all you need to implement a v2.0 Gaia seekbar in your own app.
Live sample
The following gives you an idea of what rendered seekbars would look like.
Code
Here is the code you'll need.
CSS
<link href="(your styles folder)/style/seekbars.css" rel="stylesheet" type="text/css">
The CSS can be found in the Gaia project 2.0 branch under shared/style/seekbars.css. Copy this into your own project, along with the associated resources.
HTML
Note: The CSS inside the <style> element isn't needed for the implementation: it is just for the purposes of this example.
<!doctype html>
<html>
<head>
<link href="https://mdn.github.io/gaia-2.0-bb/seekbars.css" rel="stylesheet" type="text/css">
<link href="https://gaia-components.github.io/gaia-icons/gaia-icons-embedded.css" rel="stylesheet" type="text/css">
<style>
html, body {
margin: 0;
padding: 0;
font-size: 10px;
}
body {
background: #fff;
}
h2.bb-docs {
font-size: 1.8rem;
font-family: sans-serif;
font-weight: lighter;
color: #666;
margin: -1px 0 0;
background-color: #f5f5f5;
padding: 0.4rem 0.4rem 0.4rem 3rem;
border: solid 1px #e8e8e8;
}
body[role="application"] section {
background: #fff;
padding: 2rem;
}
body[role="application"] section button {
left: 80%;
}
body[role="application"] section label.icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAYAAABxVAqfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozMzNEQkM1MTc5QkQxMUUyQTUzNzk3RkFBNjU0RDgwQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozMzNEQkM1Mjc5QkQxMUUyQTUzNzk3RkFBNjU0RDgwQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjMzM0RCQzRGNzlCRDExRTJBNTM3OTdGQUE2NTREODBBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjMzM0RCQzUwNzlCRDExRTJBNTM3OTdGQUE2NTREODBBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+KDVsXAAACoxJREFUeNrEmHlU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);
}
body[role="application"] section label.icon:last-of-type {
background-position: right -3rem;
}
</style>
</head>
<body>
<h2 class="bb-docs">Seekbars (using progress tag)</h2>
<section>
<div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
<div>
<progress value="80" max="100"></progress>
<button>handler</button>
</div>
</div>
</section>
<h2 class="bb-docs">Value seeker</h2>
<section>
<div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
<label>0</label>
<label>100</label>
<div>
<progress value="80" max="100"></progress>
<button>handler</button>
</div>
</div>
</section>
<h2 class="bb-docs">Icon seeker</h2>
<section>
<div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
<label class="icon">0</label>
<label class="icon">100</label>
<div>
<progress value="80" max="100"></progress>
<button>handler</button>
</div>
</div>
</section>
<h2 class="bb-docs">Seekbars (using Input type range)</h2>
<section>
<input type="range">
</section>
<h2 class="bb-docs">Value seeker</h2>
<section role="slider">
<label>0</label>
<label>100</label>
<div>
<input type="range">
</div>
</section>
<h2 class="bb-docs">Value seeker</h2>
<section role="slider">
<label class="icon">0</label>
<label class="icon">100</label>
<div>
<input type="range">
</div>
</section>
</body>
</html>
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills,
chrisdavidmills-github
Last updated by:
chrisdavidmills,