siftal
Version:
CSS Framework, not bad ;)
70 lines (62 loc) • 2.16 kB
HTML
<html lang="en" dir="ltr">
<head>
<title>Siftal radio</title>
<meta charset="utf-8">
<meta name="description" content="Siftal, a simple CSS framework with usefull tools for Ermile projects">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0 maximum-scale=1.2, minimal-ui"/>
<link rel="shortcut icon" href="../dist/images/siftal/siftal.ico">
<link rel="icon" href="../dist/images/siftal/siftal.png" type="image/png">
<link rel="stylesheet" href="../dist/css/siftal.css">
<style>
body{background-color:#eee;}
</style>
</head>
<body class="ltr">
<div class="cn">
<div class="tbox">
<h2>Range Slider</h2>
<p>Easily use our simple HTML5 range slider</p>
</div>
<div class="cbox">
<div class="example">
<input type="range" min="1" max="100" value="50">
</div>
</div>
<div class="cbox">
<div class="example">
<div class="rangeSlider1">
<input type="range" value="100" min="0" max="500">
<output>60</output>
</div>
</div>
<div class="example">
<h2>With flex has automatic width for output value</h2>
<div class="rangeSlider1 f align-center">
<input class="c" type="range" value="49700" min="0" max="7000000">
<output class="cauto mLa20">60</output>
</div>
</div>
<div class="example">
<div class="rangeSlider1">
<input type="range" value="250" min="0" max="500" step="50">
<output>60</output>
</div>
</div>
<div class="example">
<div class="rangeSlider1">
<input type="range" value="400" min="0" max="500">
<output>60</output>
</div>
<div class="f">
<div class="c txtLa">Min</div>
<div class="c txtC">Average</div>
<div class="c txtRa">Max</div>
<div class="cauto we80"></div>
</div>
</div>
</div>
</div>
<script src="../dist/js/siftal.min.js"></script>
</body>
</html>