From 58dc8787e2f25410d867379601dc2edb8b0eb091 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 23 Sep 2013 20:01:07 -0500 Subject: [PATCH] range input --- scss/ionic/_form.scss | 24 ++++++++++++++++++++++++ scss/ionic/_toggle.scss | 1 + test/index.html | 5 +++-- test/input-range.html | 37 +++++++++++++++++++++++++++++++++++++ 4 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 test/input-range.html diff --git a/scss/ionic/_form.scss b/scss/ionic/_form.scss index 26ff039041..fa143b75d9 100644 --- a/scss/ionic/_form.scss +++ b/scss/ionic/_form.scss @@ -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 // ------------------------------- diff --git a/scss/ionic/_toggle.scss b/scss/ionic/_toggle.scss index 383209319c..3a5000e926 100644 --- a/scss/ionic/_toggle.scss +++ b/scss/ionic/_toggle.scss @@ -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; diff --git a/test/index.html b/test/index.html index 36aa77abf9..abf65a07c4 100644 --- a/test/index.html +++ b/test/index.html @@ -27,9 +27,10 @@

Input: Slider

Input: Text (single-line)

Input: Text (multi-line)

-

Inputs With Icons

-

Input: Toggle

Input: Radio Buttons

+

Input: Range

+

Input: Toggle

+

Inputs With Icons

Lists

Modals

Panels

diff --git a/test/input-range.html b/test/input-range.html new file mode 100644 index 0000000000..7d4bc03354 --- /dev/null +++ b/test/input-range.html @@ -0,0 +1,37 @@ + + + + Input: Range + + + + + + + + +
+ +
+

Input: Range

+
+ +
+ +
    +
  • + Level of Awesomeness: + +
    • +
+ +
+

Homepage

+
+ +
+ +
+ + +