Skip to content

Commit 845d569

Browse files
leongersenleongersen
committed
4.0 rewrite
1 parent f4cf516 commit 845d569

File tree

7 files changed

+879
-609
lines changed

7 files changed

+879
-609
lines changed

‎.gitignore‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎README.md‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,39 @@
11
# noUiSlider
2-
_Current version: 3.2.0_
2+
_Current version: 4.0.0_
33

4-
noUiSlider is a little jQuery plugin that allows you to create range sliders.
4+
noUiSlider is a super tiny jQuery plugin that allows you to create range sliders.
55
It fully supports touch, and it is way(!) less bloated than the jQueryUI library.
66

77
A full documentation, including examples, is available on the [noUiSlider documentation page](http://refreshless.com/nouislider/).
88

9-
**Changelog for version 3.2.1:**
10-
_[latest minor release]_
9+
Changes
10+
-------
11+
**Changelog for version 4:**
1112

12-
* Fixed an issue when initializing a slider with two handles, both on 100%.
13-
14-
**Changelog for version 3:**
1513
_[current major release]_
1614

17-
* Added responsive design support
18-
* Added Windows Pointer Events support
19-
* Fixed issues
20-
* Reduced file size
15+
* Massive update overhauling the entire code style
16+
* Better styling possibilties
17+
* Brand new Flat theme
18+
* Windows Phone 8 support
19+
* Performance improvements
20+
* New way of handling disabled sliders
21+
* Internal option testing provides feedback on issues
22+
23+
Compression and Error checking
24+
------------------------------
25+
26+
**CSS**
27+
The stylesheet is compressed using:
28+
[CSSMinifier](http://cssminifier.com/)
29+
30+
**JS**
31+
The plugin is compressed using the Google Closure compiler, using the 'simple' optimalization option.
32+
[Google Closure Compiler](http://closure-compiler.appspot.com/home)
33+
34+
**Code**
35+
The plugin code is checked using JsLint, with the following options:
36+
`/*jslint browser: true, devel: true, nomen: true, plusplus: true, unparam: true, sloppy: true, todo: true, white: true */`
37+
38+
Please note that while some errors remain, these are not issues as they are merely a difference in coding style.
39+
[JsLint](http://jslint.com/)

‎jquery.nouislider.css‎

Lines changed: 91 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,111 @@
1-
2-
/* Body, root elements
3-
* Sets a default cursor on the body, blocks text selection.
4-
*/
5-
.noUi-root * {
1+
2+
/* General CSS resets;
3+
* The target itself is not affected, allowing
4+
* the remainder of the document to use an
5+
* alternate box-sizing model;
6+
* Support for box-sizing is wide spread:
7+
* http://caniuse.com/#search=box-sizing
8+
*/
9+
.noUi-target * {
10+
-webkit-box-sizing: border-box;
11+
-moz-box-sizing: border-box;
612
box-sizing: border-box;
7-
display: block;
8-
margin: 0;
9-
padding: 0;
10-
border: 0;
13+
-webkit-touch-callout: none;
14+
-ms-touch-action: none;
15+
-webkit-user-select: none;
16+
-moz-user-select: none;
17+
-ms-user-select: none;
18+
cursor: default;
1119
}
12-
.noUi-root *,
13-
body[data-nouislider-active] {
14-
-webkit-user-select: none;
15-
-moz-user-select: none;
16-
-ms-user-select: none;
17-
-ms-touch-action: none;
20+
21+
/* Main slider bar;
22+
*/
23+
.noUi-base {
24+
height: 40px;
25+
width: 300px;
26+
position: relative;
27+
max-width: 100%;
28+
border: 1px solid #bfbfbf;
29+
z-index: 1;
1830
}
19-
body[data-nouislider-active] * {
20-
cursor: default !important;
31+
32+
/* Handles + active state;
33+
*/
34+
.noUi-handle {
35+
background: #EEE;
36+
height: 44px;
37+
width: 44px;
38+
border: 1px solid #BFBFBF;
39+
margin: -3px 0 0 -23px;
40+
}
41+
.noUi-active {
42+
background: #E9E9E9;
43+
}
44+
.noUi-active:after {
45+
content: "";
46+
display: block;
47+
height: 100%;
48+
border: 1px solid #DDD;
2149
}
2250

23-
/* Basics
24-
*
25-
*/
26-
.noUi-slider {
27-
position: relative;
51+
/* Styling-only classes;
52+
* Structured to prevent double declarations
53+
* for various states of the slider.
54+
*/
55+
.noUi-connect {
56+
background: Teal;
57+
}
58+
.noUi-background {
59+
background: #DDD;
2860
}
29-
.noUi-slider b {
61+
62+
/* Functional styles for handle positioning;
63+
* Note that the origins have z-index 0, the base has
64+
* z-index 1; This fixes a bug where borders become invisible.
65+
*/
66+
.noUi-origin {
3067
position: absolute;
31-
z-index: 1;
68+
right: 0;
69+
top: 0;
70+
bottom: 0;
71+
z-index: 0;
3272
}
33-
.noUi-slider b + b {
34-
/* Fallback for older browsers... :( */
35-
background: #d9d7cb !important;
73+
.noUi-origin-upper {
3674
background: inherit !important;
3775
}
38-
.noUi-horizontal {
39-
width: 100%;
40-
height: 12px;
41-
}
42-
.noUi-horizontal b {
43-
height: 100%;
44-
right: 0;
76+
.noUi-z-index {
77+
z-index: 10;
4578
}
79+
80+
/* Adaptations for the vertical slider;
81+
*/
4682
.noUi-vertical {
47-
height: 100%;
48-
width: 12px;
83+
height: 300px;
84+
width: 40px;
85+
max-height: 100%;
4986
}
50-
.noUi-vertical b {
51-
width: 100%;
87+
.noUi-vertical .noUi-origin {
5288
bottom: 0;
89+
left: 0;
5390
}
54-
55-
/* Looks
56-
*
57-
*/
58-
.noUi-slider {
59-
border: 1px solid #908d84;
60-
border-radius: 3px;
61-
}
62-
.noUi-slider.noUi-connect.noUi-lower,
63-
.noUi-slider.noUi-connect b {
64-
background: #b2a98f;
65-
}
66-
.noUi-slider,
67-
.noUi-slider.noUi-connect.noUi-lower b {
68-
background: #d9d7cb;
69-
box-shadow: inset 0px 1px 7px #b6b4a8;
70-
}
71-
.noUi-slider b {
72-
border-radius: 2px;
73-
}
74-
.noUi-slider i {
75-
width: 18px;
76-
height: 18px;
77-
border: 1px solid #999;
78-
border-radius: 3px;
79-
background: #efefef;
80-
-webkit-transition: all 0.2s;
81-
transition: all 0.2s;
82-
}
83-
.noUi-horizontal i {
84-
margin: -4px 0 0 -9px;
85-
}
86-
.noUi-vertical i {
87-
margin: -9px 0 0 -4px;
88-
}
89-
90-
/* Hover and active states
91-
*
92-
*/
93-
.noUi-slider .noUi-base-active {
94-
z-index: 3 !important;
95-
}
96-
.noUi-slider i.noUi-active,
97-
.noUi-slider i:hover {
98-
border-color: #aaa;
99-
background: #fff;
100-
width: 26px;
101-
height: 26px;
102-
margin: -8px 0 0 -13px;
103-
}
104-
.noUi-vertical i.noUi-active,
105-
.noUi-vertical i:hover {
106-
margin: -4px 0 0 -9px;
91+
.noUi-vertical .noUi-handle {
92+
margin: -23px 0 0 -3px;
10793
}
10894

109-
/* Disabled
110-
*
111-
*/
112-
.noUi-root[disabled="disabled"] .noUi-slider {
113-
background: #ccc;
114-
}
115-
.noUi-root[disabled="disabled"] i:hover,
116-
.noUi-root[disabled="disabled"] i {
95+
/* Various alternate slider states;
96+
* Support for transition is widely available,
97+
* Only IE7, IE8 and IE9 will ignore these rules.
98+
* Since this is merely a progressive enhancement,
99+
* this is no problem at all.
100+
* http://caniuse.com/#search=transition
101+
*/
102+
.noUi-target[disabled] .noUi-base {
117103
background: #999;
118-
cursor: not-allowed;
119-
border-color: #333;
120104
}
121-
.noUi-root:disabled {
122-
display: none;
105+
.noUi-target[disabled] .noUi-connect {
106+
background: #BBB;
107+
}
108+
.noUi-state-tap .noUi-origin {
109+
-webkit-transition: left 0.3s, top 0.3s;
110+
transition: left 0.3s, top 0.3s;
123111
}

0 commit comments

Comments
 (0)