diff --git a/axis/ui.styl b/axis/ui.styl
index 4a83feb..caaadce 100644
--- a/axis/ui.styl
+++ b/axis/ui.styl
@@ -335,7 +335,7 @@ radio(color=#0074d9)
background: rgba(#000,.15)
border: 0.125em solid #fff
border-radius: 1em
- box-shadow: 0 0 0 .1em rgba(#000, .25)
+ box-shadow: 0 0 0 .1em rgba(#000, .25)
content: ''
display: inline-block
height: 1em
@@ -348,3 +348,97 @@ radio(color=#0074d9)
&:checked + span:before, &:focus + span:before
background: color
box-shadow: 0 0 0 0.25em rgba(#000, .15)
+
+// Mixin: Range
+//
+// A clean, cross-browser styling reset for range inputs.
+// Note: range inputs are not supported in IE9 and below.
+// http://caniuse.com/#feat=input-range
+//
+// ex. range()
+// ex. range: tomato 200px 15px 9px #333
+
+range(color=#0074d9, trackWidth=100%, thumbSize=2em, trackHeight=.5em, trackColor=rgba(#000, .1))
+ -webkit-appearance: none
+ width: trackWidth
+ margin: 0
+ outline: none
+ background: transparent
+
+ &::-webkit-slider-runnable-track
+ background: trackColor
+ border: none
+ border-radius: trackHeight
+ height: trackHeight
+ width: trackWidth
+
+ &::-webkit-slider-thumb
+ -webkit-appearance: none
+ border: none
+ height: thumbSize
+ width: thumbSize
+ border-radius: 50%
+ background: color
+ margin-top: "calc(-%s / 2 + %s / 2)" % (thumbSize trackHeight)
+ transition: all 0.2s ease
+
+ &:hover
+ transform: scale(1.2)
+ cursor: pointer
+
+ &:active
+ background: darken(color, 15%)
+
+ &:focus
+ outline: none
+
+ &:focus::-webkit-slider-runnable-track
+ background: trackColor
+
+ &::-moz-range-track
+ width: trackWidth
+ height: trackHeight
+ background: trackColor
+ border: none
+ border-radius: trackHeight
+
+ &::-moz-range-thumb
+ border: none
+ height: thumbSize
+ width: thumbSize
+ border-radius: 50%
+ background: color
+ transition: all 0.2s ease
+
+ &:hover
+ transform: scale(1.2)
+
+ &:active
+ background: darken(color, 15%)
+
+ &::-moz-focus-outer
+ border: 0
+
+ &::-ms-track
+ height: trackHeight
+ width: trackWidth
+ background: transparent
+ border-width: "calc(%s / 2 + %s / 2)" % (thumbSize trackHeight) 0
+ color: transparent;
+
+ &::-ms-fill-lower, &::-ms-fill-upper, &:focus::-ms-fill-lower, &:focus::-ms-fill-upper
+ background: trackColor
+ border-radius: 10px
+
+ &::-ms-thumb
+ border: none
+ height: 2em
+ width: 2em
+ border-radius: 50%
+ background: color
+
+ &:active
+ background: darken(color, 15%)
+
+ &::-ms-tooltip
+ display: none
diff --git a/test/fixtures/ui/range.css b/test/fixtures/ui/range.css
new file mode 100644
index 0000000..e1c99ba
--- /dev/null
+++ b/test/fixtures/ui/range.css
@@ -0,0 +1,104 @@
+.range {
+ -webkit-appearance: none;
+ width: 100%;
+ margin: 0;
+ outline: none;
+ background: transparent;
+}
+.range::-webkit-slider-runnable-track {
+ background: rgba(0,0,0,0.1);
+ border: none;
+ border-radius: 0.5em;
+ height: 0.5em;
+ width: 100%;
+}
+.range::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ border: none;
+ height: 2em;
+ width: 2em;
+ border-radius: 50%;
+ background: #0074d9;
+ margin-top: calc(-2em / 2 + 0.5em / 2);
+ -webkit-transition: all 0.2s ease;
+ -moz-transition: all 0.2s ease;
+ -o-transition: all 0.2s ease;
+ -ms-transition: all 0.2s ease;
+ transition: all 0.2s ease;
+}
+.range::-webkit-slider-thumb:hover {
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2);
+ -o-transform: scale(1.2);
+ -ms-transform: scale(1.2);
+ transform: scale(1.2);
+ cursor: pointer;
+}
+.range::-webkit-slider-thumb:active {
+ background: #0063b8;
+}
+.range:focus {
+ outline: none;
+}
+.range:focus::-webkit-slider-runnable-track {
+ background: rgba(0,0,0,0.1);
+}
+.range::-moz-range-track {
+ width: 100%;
+ height: 0.5em;
+ background: rgba(0,0,0,0.1);
+ border: none;
+ border-radius: 0.5em;
+}
+.range::-moz-range-thumb {
+ border: none;
+ height: 2em;
+ width: 2em;
+ border-radius: 50%;
+ background: #0074d9;
+ -webkit-transition: all 0.2s ease;
+ -moz-transition: all 0.2s ease;
+ -o-transition: all 0.2s ease;
+ -ms-transition: all 0.2s ease;
+ transition: all 0.2s ease;
+}
+.range::-moz-range-thumb:hover {
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2);
+ -o-transform: scale(1.2);
+ -ms-transform: scale(1.2);
+ transform: scale(1.2);
+}
+.range::-moz-range-thumb:active {
+ background: #0063b8;
+}
+.range::-moz-focus-outer {
+ border: 0;
+}
+.range::-ms-track {
+ height: 0.5em;
+ width: 100%;
+ background: transparent;
+ border-width: calc(2em / 2 + 0.5em / 2) 0;
+ color: transparent;
+}
+.range::-ms-fill-lower,
+.range::-ms-fill-upper,
+.range:focus::-ms-fill-lower,
+.range:focus::-ms-fill-upper {
+ background: rgba(0,0,0,0.1);
+ border-radius: 10px;
+}
+.range::-ms-thumb {
+ border: none;
+ height: 2em;
+ width: 2em;
+ border-radius: 50%;
+ background: #0074d9;
+}
+.range::-ms-thumb:active {
+ background: #0063b8;
+}
+.range::-ms-tooltip {
+ display: none;
+}
diff --git a/test/fixtures/ui/range.styl b/test/fixtures/ui/range.styl
new file mode 100644
index 0000000..57dda8d
--- /dev/null
+++ b/test/fixtures/ui/range.styl
@@ -0,0 +1,2 @@
+.range
+ range()
diff --git a/test/test.coffee b/test/test.coffee
index 4db2aa3..064307d 100644
--- a/test/test.coffee
+++ b/test/test.coffee
@@ -201,6 +201,9 @@ describe 'ui', ->
it 'radio', (done) ->
compile_and_match(path.join(@path, 'radio.styl'), done)
+ it 'range', (done) ->
+ compile_and_match(path.join(@path, 'range.styl'), done)
+
describe 'utilities', ->
before -> @path = path.join(test_path, 'utilities')
diff --git a/test/visual.html b/test/visual.html
index a6b1487..1c6e649 100644
--- a/test/visual.html
+++ b/test/visual.html
@@ -62,6 +62,7 @@
+
@@ -348,6 +349,10 @@ test
+