Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit defdce7

Browse files
author
Alexander Schmitz
committed
Range Slider: Simplified updating of the highlight, changed the default layout to the split style. updated slider to snap to steps as long as the step is larger then 1px. Made clicks on the extremes register to closest slider.
1 parent 459fbfc commit defdce7

File tree

3 files changed

+202
-253
lines changed

3 files changed

+202
-253
lines changed

‎css/structure/jquery.mobile.forms.rangeslider.css‎

Lines changed: 101 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,121 @@
1-
.ui-rangeslider{
2-
position:relative;
3-
display:inline-block;
4-
min-height:1em;
5-
width:100%;
6-
padding-right:30px;
7-
box-sizing:border-box;
8-
}
9-
.ui-rangeslider div.ui-slider{
10-
position:absolute;
11-
left:0;
12-
top:0;
13-
width:100%;
14-
margin:0;
15-
}
16-
.ui-rangeslider label.ui-slider{
17-
18-
color: #222 /*{c-bup-color}*/;
19-
text-shadow: 0 /*{c-bup-shadow-x}*/ 1px /*{c-bup-shadow-y}*/ 0 /*{c-bup-shadow-radius}*/ #fff /*{c-bup-shadow-color}*/;
20-
21-
margin-right:3px;
22-
}
23-
.ui-rangeslider-sliders{
24-
position:relative;
25-
display:inline-block;
26-
width:60%;
27-
min-height:1em;
28-
margin:0 0 0 20px;
1+
.ui-rangeslider {
2+
position: relative;
3+
display: inline-block;
4+
min-height: 1em;
5+
width: 100%;
6+
padding-right: 30px;
7+
}
8+
.ui-rangeslider div.ui-slider {
9+
position: absolute;
10+
left: 0;
11+
top: 0;
12+
width: 100%;
13+
margin: 0;
14+
}
15+
.ui-rangeslider label.ui-slider {
16+
margin-right: 3px;
17+
}
18+
.ui-rangeslider-sliders {
19+
position: relative;
20+
display: inline-block;
21+
width: 60%;
22+
min-height: 1em;
23+
margin: 0 0 0 20px;
2924
}
3025

31-
.ui-rangeslider input.ui-slider-input:last-child{
32-
margin-left:20px;
26+
.ui-rangeslider input.ui-slider-input:last-child {
27+
margin-left: 20px;
3328
}
3429

35-
.ui-rangeslider .ui-rangeslider-sliders .ui-slider{
36-
width:86%;
37-
margin-left:20px;
38-
top:.7em;
30+
.ui-rangeslider .ui-rangeslider-sliders .ui-slider {
31+
width: 86%;
32+
margin-left: 20px;
33+
top: .7em;
3934
}
4035

4136
/*full width style*/
42-
.ui-rangeslider.ui-rangeslider-full .ui-rangeslider-sliders{
43-
width:100%;
44-
clear:both;
37+
.ui-rangeslider.ui-rangeslider-full .ui-rangeslider-sliders {
38+
width: 98%;
39+
margin:0;
40+
margin-left:1%;
41+
clear: both;
4542
overflow: visible;
4643
}
47-
.ui-rangeslider.ui-rangeslider-full .ui-rangeslider-sliders .ui-slider{
48-
width:100%;
49-
margin-left:0;
44+
.ui-rangeslider.ui-rangeslider-full .ui-rangeslider-sliders .ui-slider {
45+
width: 100%;
46+
margin-left: 0;
5047
}
51-
.ui-rangeslider.ui-rangeslider-full label.ui-slider{
52-
float:left;
53-
margin-top:1em;
48+
.ui-rangeslider.ui-rangeslider-full label.ui-slider {
49+
float: left;
50+
margin-top: 1em;
5451
}
5552

5653
/*mini styles*/
5754
.ui-rangeslider.ui-mini .ui-rangeslider-sliders,
5855
.ui-rangeslider.ui-mini.ui-rangeslider-split.ui-rangeslider-full .ui-rangeslider-sliders{
59-
margin-top:0;
56+
margin-top: 0;
6057
}
6158
.ui-rangeslider label.ui-slider.ui-mini,
6259
.ui-rangeslider.ui-mini span.ui-rangeslider-dash{
63-
margin-top:.5em;
60+
margin-top: .5em;
6461
}
6562
/*field-contain styling*/
66-
.ui-field-contain .ui-rangeslider label.ui-slider{
67-
width:20%;
68-
font-weight:normal;
63+
.ui-field-contain .ui-rangeslider label.ui-slider {
64+
width: 20%;
65+
font-weight: normal;
6966
margin: 0 2% 0 0;
70-
display:inline-block;
71-
float:left;
72-
}
73-
.ui-field-contain .ui-rangeslider span.ui-rangeslider-dash{
74-
margin-top:.5em;
75-
float:left;
76-
}
77-
.ui-field-contain .ui-rangeslider .ui-rangeslider-sliders{
78-
margin-top:0;
79-
width:auto;
80-
margin-left:22%;
81-
}
82-
.ui-field-contain .ui-rangeslider.ui-rangeslider-split .ui-rangeslider-sliders .ui-slider{
83-
margin-left:20px;
84-
}
85-
.ui-field-contain .ui-rangeslider input.ui-slider-input,
86-
.ui-field-contain .ui-rangeslider span.ui-rangeslider-dash{
87-
float:left;
88-
}
89-
.ui-field-contain .ui-rangeslider{
90-
padding-right:0px;
67+
display: inline-block;
68+
float: left;
9169
}
70+
9271
/*split styles*/
93-
.ui-rangeslider.ui-rangeslider-split{
94-
padding-right:0px;
72+
.ui-rangeslider.ui-rangeslider-split {
73+
padding-right: 0px;
9574
}
96-
.ui-rangeslider.ui-rangeslider-split .ui-rangeslider-dash{
97-
display:none;
75+
.ui-rangeslider.ui-rangeslider-split .ui-rangeslider-dash {
76+
display: none;
9877
}
99-
.ui-rangeslider.ui-rangeslider-split.ui-rangeslider-full label.ui-slider{
100-
display:block;
101-
float:none;
102-
margin-top:0;
78+
.ui-rangeslider.ui-rangeslider-split.ui-rangeslider-full label.ui-slider {
79+
display: block;
80+
float: none;
81+
margin-top: 0;
10382
}
104-
.ui-rangeslider span.ui-rangeslider-dash{
105-
float:left;
106-
margin-top:1em;
83+
.ui-rangeslider span.ui-rangeslider-dash {
84+
float: left;
85+
margin-top: 1em;
10786
}
108-
.ui-rangeslider input.ui-slider-input{
109-
float:left;
87+
.ui-rangeslider input.ui-slider-input {
88+
float: left;
11089
}
111-
.ui-rangeslider.ui-rangeslider-split input.ui-slider-input.ui-rangeslider-last{
112-
float:right;
90+
.ui-rangeslider.ui-rangeslider-split input.ui-slider-input.ui-rangeslider-last {
91+
float: right;
11392
}
114-
.ui-rangeslider .ui-rangeslider-sliders{
93+
.ui-rangeslider .ui-rangeslider-sliders {
11594
overflow: hidden;
11695
height: 2.5em;
117-
margin-top: .5em;
11896
width: auto;
119-
display:block;
97+
display: block;
12098
}
12199

122-
.ui-rangeslider.ui-rangeslider-split.ui-rangeslider-full .ui-rangeslider-sliders{
123-
margin-top:.7em;
124-
clear:none;
100+
.ui-rangeslider.ui-rangeslider-split.ui-rangeslider-full .ui-rangeslider-sliders {
101+
margin-top: .7em;
102+
clear: none;
125103
}
126104

127-
.ui-rangeslider.ui-rangeslider-split .ui-rangeslider-sliders .ui-slider{
128-
margin-left:7%;
129-
width:86%;
130-
top:.7em;
131-
}
132-
.ui-rangeslider.ui-rangeslider-split.ui-rangeslider-full .ui-rangeslider-sliders{
133-
width:auto;
134-
margin-left:0;
135-
overflow:hidden;
136-
}
137-
.ui-field-contain .ui-rangeslider.ui-rangeslider-split .ui-rangeslider-sliders {
138-
margin-top: -2.2em;
139-
width:70%;
140-
float:right;
141-
}
142-
.ui-field-contain .ui-rangeslider.ui-rangeslider-split.ui-mini .ui-rangeslider-sliders .ui-slider{
143-
margin-left:20px;
144-
}
145-
@media (max-width: 28em) {
146-
.ui-rangeslider .ui-rangeslider-sliders .ui-slider{
147-
width:100%;
148-
margin-left:0;
105+
.ui-rangeslider.ui-rangeslider-split .ui-rangeslider-sliders .ui-slider {
106+
margin-left: 7%;
107+
width: 86%;
108+
top: .7em;
109+
}
110+
.ui-rangeslider.ui-rangeslider-split.ui-rangeslider-full .ui-rangeslider-sliders {
111+
width: auto;
112+
margin-left: 0;
113+
overflow: hidden;
114+
}
115+
@media ( max-width: 28em ) {
116+
.ui-rangeslider .ui-rangeslider-sliders .ui-slider {
117+
width: 100%;
118+
margin-left: 0;
149119
}
150120
.ui-rangeslider div.ui-rangeslider-sliders,
151121
.ui-rangeslider.ui-rangeslider-split.ui-rangeslider-full div.ui-rangeslider-sliders,
@@ -156,40 +126,40 @@
156126
margin-left: 1%;
157127
overflow: visible;
158128
}
159-
.ui-rangeslider{
160-
padding-right:0;
129+
.ui-rangeslider {
130+
padding-right: 0;
161131
}
162132
.ui-rangeslider label.ui-slider,
163133
.ui-rangeslider.ui-rangeslider-split.ui-rangeslider-full label.ui-slider,
164-
.ui-rangeslider.ui-rangeslider-full label.ui-slider,{
165-
margin-top:1em;
166-
display:inline;
134+
.ui-rangeslider.ui-rangeslider-full label.ui-slider {
135+
margin-top: 1em;
136+
display: inline;
167137
}
168138
.ui-rangeslider .ui-rangeslider-dash {
169139
display: inline;
170140
}
171-
.ui-rangeslider label.ui-slider{
172-
display:inline-block;
141+
.ui-rangeslider label.ui-slider {
142+
display: inline-block;
173143
}
174144
.ui-rangeslider input.ui-slider-input,
175145
.ui-rangeslider span.ui-rangeslider-dash,
176146
.ui-rangeslider.ui-rangeslider-split input.ui-slider-input,
177-
.ui-rangeslider.ui-rangeslider-split input.ui-slider-input.ui-rangeslider-last{
178-
float:none;
147+
.ui-rangeslider.ui-rangeslider-split input.ui-slider-input.ui-rangeslider-last {
148+
float: none;
179149
}
180150
.ui-rangeslider.ui-rangeslider-split .ui-rangeslider-sliders,
181-
.ui-rangeslider .ui-rangeslider-sliders{
182-
width:98%;
183-
margin-top:0;
184-
margin-left:1%;
185-
overflow:visible;
186-
height:1.4em;
151+
.ui-rangeslider .ui-rangeslider-sliders {
152+
width: 98%;
153+
margin-top: 0;
154+
margin-left: 1%;
155+
overflow: visible;
156+
height: 1.4em;
187157
}
188-
.ui-rangeslider.ui-rangeslider-split .ui-rangeslider-sliders .ui-slider{
189-
width:98%%;
190-
margin-left:1%;
158+
.ui-rangeslider.ui-rangeslider-split .ui-rangeslider-sliders .ui-slider {
159+
width: 98%%;
160+
margin-left: 1%;
191161
}
192-
.ui-field-contain .ui-rangeslider div.ui-rangeslider-sliders{
162+
.ui-field-contain .ui-rangeslider div.ui-rangeslider-sliders {
193163
width: 92%;
194164
margin-left: 4%;
195165
display: inline-block;

0 commit comments

Comments
 (0)