Skip to content

Commit 13d21c8

Browse files
davidchindavidchin
committed
React range input component
1 parent 70af583 commit 13d21c8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+3258
-0
lines changed

‎.editorconfig‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true
11+
12+
[*.md]
13+
trim_trailing_whitespace = false

‎.eslintrc‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
rules:
2+
indent:
3+
- 2
4+
- 2
5+
quotes:
6+
- 2
7+
- single
8+
linebreak-style:
9+
- 2
10+
- unix
11+
semi:
12+
- 2
13+
- always
14+
react/sort-comp:
15+
- 2
16+
- order
17+
- lifecycle
18+
- /^on.+$/
19+
- render
20+
- everything-else
21+
env:
22+
es6: true
23+
browser: true
24+
jasmine: true
25+
extends: airbnb
26+
ecmaFeatures:
27+
jsx: true
28+
experimentalObjectRestSpread: true
29+
modules: true
30+
plugins:
31+
- react

‎.gitignore‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
*.log
2+
.DS_Store
3+
/bower_components
4+
/build
5+
/coverage
6+
/example/build
7+
/node_modules

‎.npmignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.editorconfig
2+
example
3+
gulpfile.babel.js
4+
tasks

‎.scss-lint.yml‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
linters:
2+
BangFormat:
3+
enabled: true
4+
space_before_bang: true
5+
space_after_bang: false
6+
7+
BorderZero:
8+
enabled: true
9+
10+
ColorKeyword:
11+
enabled: false
12+
13+
Comment:
14+
enabled: false
15+
16+
Compass::*:
17+
enabled: false
18+
19+
DebugStatement:
20+
enabled: true
21+
22+
DeclarationOrder:
23+
enabled: true
24+
25+
DuplicateProperty:
26+
enabled: true
27+
28+
ElsePlacement:
29+
enabled: true
30+
style: same_line
31+
32+
EmptyLineBetweenBlocks:
33+
enabled: false
34+
ignore_single_line_blocks: true
35+
36+
EmptyRule:
37+
enabled: true
38+
39+
FinalNewline:
40+
enabled: true
41+
present: true
42+
43+
HexLength:
44+
enabled: true
45+
style: long
46+
47+
HexNotation:
48+
enabled: true
49+
style: lowercase
50+
51+
HexValidation:
52+
enabled: true
53+
54+
IdWithExtraneousSelector:
55+
enabled: true
56+
57+
ImportPath:
58+
enabled: true
59+
leading_underscore: false
60+
filename_extension: false
61+
62+
Indentation:
63+
enabled: true
64+
character: space
65+
width: 2
66+
67+
LeadingZero:
68+
enabled: true
69+
style: include_zero
70+
71+
MergeableSelector:
72+
enabled: true
73+
force_nesting: true
74+
75+
NameFormat:
76+
enabled: false
77+
78+
NestingDepth:
79+
enabled: true
80+
max_depth: 2
81+
82+
PlaceholderInExtend:
83+
enabled: false
84+
85+
PropertySortOrder:
86+
enabled: true
87+
ignore_unspecified: false
88+
89+
PropertySpelling:
90+
enabled: true
91+
extra_properties: []
92+
93+
QualifyingElement:
94+
enabled: true
95+
allow_with_attribute: false
96+
allow_with_class: false
97+
allow_with_id: false
98+
99+
SelectorDepth:
100+
enabled: true
101+
max_depth: 3
102+
103+
SelectorFormat:
104+
enabled: true
105+
convention: ^(([A-Z][a-z]*)+$|(([A-Z][a-z]*)+|u|is|js)(-|--)([a-z]+([a-z]|[A-Z])*)+|(([A-Z][a-z]*)+|u|is|js)(-|--)([a-z]+([a-z]|[A-Z])*)+(--[a-z]+([a-z]|[A-Z])*)+)|[ng]-(\w)+(-(\w)*)*$
106+
ignored_names: ["better-timeinput"]
107+
ignored_types: ["attribute", "element", "pseudo-selector"]
108+
109+
Shorthand:
110+
enabled: true
111+
112+
SingleLinePerProperty:
113+
enabled: true
114+
allow_single_line_rule_sets: true
115+
116+
SingleLinePerSelector:
117+
enabled: true
118+
119+
SpaceAfterComma:
120+
enabled: true
121+
122+
SpaceAfterPropertyColon:
123+
enabled: true
124+
style: one_space
125+
126+
SpaceAfterPropertyName:
127+
enabled: true
128+
129+
SpaceBeforeBrace:
130+
enabled: true
131+
style: space
132+
allow_single_line_padding: false
133+
134+
SpaceBetweenParens:
135+
enabled: true
136+
spaces: 0
137+
138+
StringQuotes:
139+
enabled: true
140+
style: double_quotes
141+
142+
TrailingSemicolon:
143+
enabled: true
144+
145+
TrailingZero:
146+
enabled: false
147+
148+
UnnecessaryMantissa:
149+
enabled: true
150+
151+
UnnecessaryParentReference:
152+
enabled: true
153+
154+
UrlFormat:
155+
enabled: true
156+
157+
UrlQuotes:
158+
enabled: true
159+
160+
VendorPrefixes:
161+
enabled: true
162+
identifier_list: base
163+
include: []
164+
exclude: []
165+
166+
ZeroUnit:
167+
enabled: true

‎Gemfile‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
source 'https://rubygems.org'
2+
3+
gem 'scss_lint', '~> 0.41.0'

‎Gemfile.lock‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
GEM
2+
remote: https://rubygems.org/
3+
specs:
4+
rainbow (2.0.0)
5+
sass (3.4.18)
6+
scss_lint (0.41.0)
7+
rainbow (~> 2.0)
8+
sass (~> 3.4.15)
9+
10+
PLATFORMS
11+
ruby
12+
13+
DEPENDENCIES
14+
scss_lint (~> 0.41.0)

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2015 David Chin
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎dist/react-input-range.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
.InputRange-slider {
2+
-webkit-appearance: none;
3+
-moz-appearance: none;
4+
appearance: none;
5+
background: #3f51b5;
6+
border: 1px solid #3f51b5;
7+
border-radius: 100%;
8+
cursor: pointer;
9+
display: block;
10+
height: 1rem;
11+
margin-left: -0.5rem;
12+
margin-top: -0.65rem;
13+
outline: none;
14+
position: absolute;
15+
top: 50%;
16+
transition: -webkit-transform 0.3s ease, box-shadow 0.3s ease;
17+
transition: transform 0.3s ease, box-shadow 0.3s ease;
18+
width: 1rem; }
19+
.InputRange-slider:active {
20+
-webkit-transform: scale(1.3);
21+
transform: scale(1.3); }
22+
.InputRange-slider:focus {
23+
box-shadow: 0 0 0 5px rgba(63, 81, 181, 0.2); }
24+
25+
.InputRange-sliderContainer {
26+
transition: left 0.3s ease; }
27+
28+
.InputRange-label {
29+
color: #aaaaaa;
30+
font-family: "Helvetica Neue", san-serif;
31+
font-size: 0.8rem; }
32+
33+
.InputRange-label--min,
34+
.InputRange-label--max {
35+
bottom: -1.4rem;
36+
position: absolute; }
37+
38+
.InputRange-label--min {
39+
left: 0; }
40+
41+
.InputRange-label--max {
42+
right: 0; }
43+
44+
.InputRange-label--value {
45+
position: absolute;
46+
top: -1.8rem; }
47+
48+
.InputRange-labelContainer {
49+
left: -50%;
50+
position: relative; }
51+
.InputRange-label--max .InputRange-labelContainer {
52+
left: 50%; }
53+
54+
.InputRange-track {
55+
background: #eeeeee;
56+
border-radius: 0.3rem;
57+
display: block;
58+
height: 0.3rem;
59+
position: relative;
60+
transition: left 0.3s ease, width 0.3s ease; }
61+
62+
.InputRange-track--container {
63+
left: 0;
64+
margin-top: -0.15rem;
65+
position: absolute;
66+
right: 0;
67+
top: 50%; }
68+
69+
.InputRange-track--active {
70+
background: #3f51b5; }
71+
72+
.InputRange {
73+
cursor: pointer;
74+
height: 1rem;
75+
position: relative;
76+
width: 100%; }

0 commit comments

Comments
 (0)