javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

range input

Browse Source
This commit is contained in:
Adam Bradley
2013-09-23 20:01:07 -05:00
parent 136925f3b2
commit 58dc8787e2
4 changed files with 65 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
scss/ionic/_form.scss
View File

@@ -236,6 +236,30 @@ textarea {
}
// Range
// -------------------------------
input[type="range"] {
display: block;
margin-top: 20px;
margin-bottom: 20px;
width: auto;
height: 4px;
outline: none;
border-radius: 4px;
background-color: #b3b3b4;
-webkit-appearance: none !important;
&::-webkit-slider-thumb {
width: $toggle-switch-width;
height: $toggle-switch-height;
border-radius: $toggle-switch-radius;
background-color: $toggle-switch-off-bg-color;
box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
-webkit-appearance: none !important;
}
}
// DISABLED STATE
// -------------------------------

1
scss/ionic/_toggle.scss
View File

@@ -37,6 +37,7 @@
display: block;
width: $toggle-switch-width;
height: $toggle-switch-height;
box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
border-radius: $toggle-switch-radius;
background-color: $toggle-switch-off-bg-color;
-webkit-transition: -webkit-transform $toggle-transition-duration ease-in-out;

5
test/index.html
View File

@@ -27,9 +27,10 @@
<p><a class="button button-block button-default" href="input-slider.html">Input: Slider</a></p>
<p><a class="button button-block button-default" href="input-text.html">Input: Text (single-line)</a></p>
<p><a class="button button-block button-default" href="input-textarea.html">Input: Text (multi-line)</a></p>
<p><a class="button button-block button-default" href="input-with-icons.html">Inputs With Icons</a></p>
<p><a class="button button-block button-default" href="input-toggle.html">Input: Toggle</a></p>
<p><a class="button button-block button-default" href="input-radio.html">Input: Radio Buttons</a></p>
<p><a class="button button-block button-default" href="input-range.html">Input: Range</a></p>
<p><a class="button button-block button-default" href="input-toggle.html">Input: Toggle</a></p>
<p><a class="button button-block button-default" href="input-with-icons.html">Inputs With Icons</a></p>
<p><a class="button button-block button-default" href="lists.html">Lists</a></p>
<p><a class="button button-block button-default" href="modals.html">Modals</a></p>
<p><a class="button button-block button-default" href="panels.html">Panels</a></p>

37
test/input-range.html Normal file
View File

@@ -0,0 +1,37 @@
<html>
<head>
<meta charset="utf-8">
<title>Input: Range</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/ionicons.css" rel="stylesheet">
<link href="../dist/ionic.css" rel="stylesheet">
</head>
<body>
<section>
<header class="bar bar-header bar-dark">
<h1 class="title">Input: Range</h1>
</header>
<main class="content has-header">
<ul class="list">
<li class="list-item">
Level of Awesomeness:
<input type="range" name="awesomeness" min="0" max="10" value="10">
</li>
</ul>
<div class="inset">
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</div>
</main>
</section>
</body>
</html>