Skip to content

Commit 13250ca

Browse files
ValentinHValentinH
committed
Merge pull request #185 from rzajac/vertical-slider
Feature - Add a vertical option to display vertical sliders.
2 parents 49a08bd + 9bb67f3 commit 13250ca

File tree

11 files changed

+531
-209
lines changed

11 files changed

+531
-209
lines changed

‎README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@ Slider directive implementation for AngularJS, without any dependencies.
1616
- Simple to use
1717
- Compatibility with jQuery Lite, ie. with full jQuery ( Thanks Jusas! https://github.com/Jusas)
1818

19+
**Horizontal**
20+
21+
![image](https://cloud.githubusercontent.com/assets/2678610/11419158/d51cee88-9425-11e5-9d3f-3f7d97a31c6f.png)
22+
23+
**Vertical**
24+
25+
![image](https://cloud.githubusercontent.com/assets/2678610/11419099/7f4c0e76-9425-11e5-98c6-615412291df1.png)
26+
1927
## Examples
2028

2129
- **Various examples:** [http://rzajac.github.io/angularjs-slider/](http://rzajac.github.io/angularjs-slider/index.html)
@@ -138,6 +146,7 @@ The default options are:
138146
interval: 350,
139147
showTicks: false,
140148
showTicksValues: false,
149+
vertical: false,
141150
scale: 1,
142151
onStart: null,
143152
onChange: null,
@@ -204,6 +213,9 @@ $scope.slider = {
204213

205214
**onEnd** - _Function(sliderId)_: Function to be called when a slider update is ended. If an id was set in the options, then it's passed to this callback.
206215

216+
**vertical** - _Boolean (defaults to false)_: Set to true to display the slider vertically. The slider will take the full height of its parent.
217+
_Changing this value at runtime is not currently supported._
218+
207219
## Change default options
208220
If you want the change the default options for all the sliders displayed in your application, you can set them using the `RzSliderOptions.options()` method:
209221
```js

‎demo/demo.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,10 @@ article { margin-bottom: 10px; }
1111
.field-title {
1212
width: 100px;
1313
}
14+
15+
.vertical-sliders {
16+
margin: 0;
17+
}
18+
.vertical-sliders > div {
19+
height: 250px;
20+
}

‎demo/demo.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,66 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
118118
}
119119
};
120120

121+
//Vertical sliders
122+
$scope.verticalSlider1 = {
123+
value: 0,
124+
options: {
125+
floor: 0,
126+
ceil: 10,
127+
vertical: true
128+
}
129+
};
130+
$scope.verticalSlider2 = {
131+
minValue: 20,
132+
maxValue: 80,
133+
options: {
134+
floor: 0,
135+
ceil: 100,
136+
vertical: true
137+
}
138+
};
139+
$scope.verticalSlider3 = {
140+
value: 5,
141+
options: {
142+
floor: 0,
143+
ceil: 10,
144+
vertical: true,
145+
showTicks: true
146+
}
147+
};
148+
$scope.verticalSlider4 = {
149+
minValue: 1,
150+
maxValue: 5,
151+
options: {
152+
floor: 0,
153+
ceil: 6,
154+
vertical: true,
155+
showTicksValues: true
156+
}
157+
};
158+
$scope.verticalSlider5 = {
159+
value: 50,
160+
options: {
161+
floor: 0,
162+
ceil: 100,
163+
vertical: true,
164+
showSelectionBar: true
165+
}
166+
};
167+
$scope.verticalSlider6 = {
168+
value: 6,
169+
options: {
170+
floor: 0,
171+
ceil: 6,
172+
vertical: true,
173+
showSelectionBar: true,
174+
showTicksValues: true,
175+
ticksValuesTooltip: function(v) {
176+
return 'Tooltip for ' + v;
177+
}
178+
}
179+
};
180+
121181
//Read-only slider
122182
$scope.read_only_slider = {
123183
value: 50,

‎demo/index.html‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,23 @@ <h2>Range slider</h2>
3333
rz-slider-model="minRangeSlider.minValue"
3434
rz-slider-high="minRangeSlider.maxValue"
3535
rz-slider-options="minRangeSlider.options"
36-
></rzslider>
36+
></rzslider>
3737
</article>
3838

3939
<article>
4040
<h2>Slider with visible selection bar</h2>
4141
<rzslider
4242
rz-slider-model="slider_visible_bar.value"
4343
rz-slider-options="slider_visible_bar.options"
44-
></rzslider>
44+
></rzslider>
4545
</article>
4646

4747
<article>
4848
<h2>Slider with custom floor/ceil/step</h2>
4949
<rzslider
5050
rz-slider-model="slider_floor_ceil.value"
5151
rz-slider-options="slider_floor_ceil.options"
52-
></rzslider>
52+
></rzslider>
5353
</article>
5454

5555
<article>
@@ -61,7 +61,7 @@ <h2>Slider with callbacks on start, change and end</h2>
6161
<rzslider
6262
rz-slider-model="slider_callbacks.value"
6363
rz-slider-options="slider_callbacks.options"
64-
></rzslider>
64+
></rzslider>
6565
</article>
6666

6767
<article>
@@ -70,31 +70,31 @@ <h2>Slider with custom display function</h2>
7070
rz-slider-model="slider_translate.minValue"
7171
rz-slider-high="slider_translate.maxValue"
7272
rz-slider-options="slider_translate.options"
73-
></rzslider>
73+
></rzslider>
7474
</article>
7575

7676
<article>
7777
<h2>Slider with Alphabet</h2>
7878
<rzslider
7979
rz-slider-model="slider_alphabet.value"
8080
rz-slider-options="slider_alphabet.options"
81-
></rzslider>
81+
></rzslider>
8282
</article>
8383

8484
<article>
8585
<h2>Slider with ticks</h2>
8686
<rzslider
8787
rz-slider-model="slider_ticks.value"
8888
rz-slider-options="slider_ticks.options"
89-
></rzslider>
89+
></rzslider>
9090
</article>
9191

9292
<article>
9393
<h2>Slider with ticks and values (and tooltips)</h2>
9494
<rzslider
9595
rz-slider-model="slider_ticks_values.value"
9696
rz-slider-options="slider_ticks_values.options"
97-
></rzslider>
97+
></rzslider>
9898
</article>
9999

100100
<article>
@@ -103,7 +103,7 @@ <h2>Range slider with ticks and values</h2>
103103
rz-slider-model="range_slider_ticks_values.minValue"
104104
rz-slider-high="range_slider_ticks_values.maxValue"
105105
rz-slider-options="range_slider_ticks_values.options"
106-
></rzslider>
106+
></rzslider>
107107
</article>
108108

109109
<article>
@@ -112,7 +112,33 @@ <h2>Slider with draggable range</h2>
112112
rz-slider-model="slider_draggable_range.minValue"
113113
rz-slider-high="slider_draggable_range.maxValue"
114114
rz-slider-options="slider_draggable_range.options"
115-
></rzslider>
115+
></rzslider>
116+
</article>
117+
118+
<article>
119+
<h2>Vertical sliders</h2>
120+
<div class="row vertical-sliders" style="margin: 20px;">
121+
<div class="col-md-2">
122+
<rzslider rz-slider-model="verticalSlider1.value" rz-slider-options="verticalSlider1.options"></rzslider>
123+
</div>
124+
<div class="col-md-2">
125+
<rzslider rz-slider-model="verticalSlider2.minValue" rz-slider-high="verticalSlider2.maxValue"
126+
rz-slider-options="verticalSlider2.options"></rzslider>
127+
</div>
128+
<div class="col-md-2">
129+
<rzslider rz-slider-model="verticalSlider3.value" rz-slider-options="verticalSlider3.options"></rzslider>
130+
</div>
131+
<div class="col-md-2">
132+
<rzslider rz-slider-model="verticalSlider4.minValue" rz-slider-high="verticalSlider4.maxValue"
133+
rz-slider-options="verticalSlider4.options"></rzslider>
134+
</div>
135+
<div class="col-md-2">
136+
<rzslider rz-slider-model="verticalSlider5.value" rz-slider-options="verticalSlider5.options"></rzslider>
137+
</div>
138+
<div class="col-md-2">
139+
<rzslider rz-slider-model="verticalSlider6.value" rz-slider-options="verticalSlider6.options"></rzslider>
140+
</div>
141+
</div>
116142
</article>
117143

118144
<article>
@@ -121,7 +147,7 @@ <h2>Disabled slider</h2>
121147
<rzslider
122148
rz-slider-model="disabled_slider.value"
123149
rz-slider-options="disabled_slider.options"
124-
></rzslider>
150+
></rzslider>
125151
</article>
126152

127153
<article>
@@ -130,7 +156,7 @@ <h2>Read-only slider</h2>
130156
<rzslider
131157
rz-slider-model="read_only_slider.value"
132158
rz-slider-options="read_only_slider.options"
133-
></rzslider>
159+
></rzslider>
134160
</article>
135161

136162
<article>
@@ -194,7 +220,7 @@ <h2>Slider with all options demo</h2>
194220
rz-slider-model="slider_all_options.minValue"
195221
rz-slider-high="slider_all_options.maxValue"
196222
rz-slider-options="slider_all_options.options"
197-
></rzslider>
223+
></rzslider>
198224
</article>
199225
</div>
200226

‎dist/rzslider.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,4 +161,74 @@ rzslider .rz-ticks .tick .tick-value {
161161
position: absolute;
162162
top: -30px;
163163
transform: translate(-50%, 0);
164+
}
165+
166+
rzslider.vertical {
167+
position: relative;
168+
width: 4px;
169+
height: 100%;
170+
padding: 0;
171+
margin: 0 20px;
172+
vertical-align: baseline;
173+
}
174+
175+
rzslider.vertical .rz-base {
176+
width: 100%;
177+
height: 100%;
178+
padding: 0;
179+
}
180+
181+
rzslider.vertical .rz-bar-wrapper {
182+
top: auto;
183+
left: 0;
184+
width: 32px;
185+
height: 100%;
186+
padding: 0 0 0 16px;
187+
margin: 0 0 0 -16px;
188+
}
189+
190+
rzslider.vertical .rz-bar {
191+
bottom: 0;
192+
left: auto;
193+
width: 4px;
194+
height: 100%;
195+
}
196+
197+
rzslider.vertical .rz-pointer {
198+
top: auto;
199+
bottom: 0;
200+
left: -14px !important;
201+
}
202+
203+
rzslider.vertical .rz-bubble {
204+
bottom: 0;
205+
left: 16px !important;
206+
margin-left: 3px;
207+
}
208+
209+
rzslider.vertical .rz-bubble.rz-selection {
210+
top: auto;
211+
left: 16px !important;
212+
}
213+
214+
rzslider.vertical .rz-ticks {
215+
top: 0;
216+
left: -3px;
217+
z-index: 1;
218+
width: auto;
219+
height: 100%;
220+
padding: 11px 0;
221+
-webkit-flex-direction: column-reverse;
222+
-ms-flex-direction: column-reverse;
223+
flex-direction: column-reverse;
224+
}
225+
226+
rzslider.vertical .rz-ticks .tick {
227+
vertical-align: middle;
228+
}
229+
230+
rzslider.vertical .rz-ticks .tick .tick-value {
231+
top: auto;
232+
right: -30px;
233+
transform: translate(0, -28%);
164234
}

0 commit comments

Comments
 (0)