Skip to content

Commit a3aacff

Browse files
Valentin HervieuValentin Hervieu
Valentin Hervieu
authored and
Valentin Hervieu
committed
Improve the example page. Increase the updatability of the slider options.
1 parent 39ef89e commit a3aacff

File tree

10 files changed

+421
-257
lines changed

10 files changed

+421
-257
lines changed

‎demo/demo.css

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
* { margin: 0; padding: 0; }
2-
body { font-family: 'Open Sans', sans-serif; color: #1f2636; font-size: 14px; }
2+
body { font-family: 'Open Sans', sans-serif; color: #1f2636; font-size: 14px; padding-bottom: 40px; }
33
header { background: #0db9f0; color: #fff; margin: -40px; margin-bottom: 40px; text-align: center; padding: 40px 0; }
44
h1 { font-weight: 300; }
55
h2 {margin-bottom:10px;}
66
.wrapper { background: #fff; padding: 40px; }
7-
article { margin-bottom: 40px; }
8-
7+
article { margin-bottom: 10px; }
8+
.tab-pane{
9+
padding-top: 10px;
10+
}
11+
.field-title {
12+
width: 100px;
13+
}

‎demo/demo.js

Lines changed: 101 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
var app = angular.module('rzSliderDemo', ['rzModule']);
1+
var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']);
22

3-
app.controller('MainCtrl', function($scope, $timeout) {
3+
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
44
//Minimal slider config
55
$scope.minSlider = {
66
value: 10
@@ -142,20 +142,115 @@ app.controller('MainCtrl', function($scope, $timeout) {
142142
}
143143
};
144144

145+
// Slider inside ng-show
145146
$scope.visible = false;
146-
147+
$scope.slider_toggle = {
148+
value: 5,
149+
options: {
150+
ceil: 10,
151+
floor: 0
152+
}
153+
};
147154
$scope.toggle = function() {
148155
$scope.visible = !$scope.visible;
149156
$timeout(function() {
150157
$scope.$broadcast('rzSliderForceRender');
151158
});
152159
};
153160

154-
$scope.slider_toggle = {
155-
value: 5,
161+
//Slider inside modal
162+
$scope.percentages = {
163+
normal: {
164+
low: 15
165+
},
166+
range: {
167+
low: 10,
168+
high: 50
169+
}
170+
};
171+
$scope.openModal = function() {
172+
var modalInstance = $modal.open({
173+
templateUrl: 'sliderModal.html',
174+
controller: function($scope, $modalInstance, values) {
175+
$scope.percentages = JSON.parse(JSON.stringify(values)); //Copy of the object in order to keep original values in $scope.percentages in parent controller.
176+
177+
178+
var formatToPercentage = function(value) {
179+
return value + '%';
180+
};
181+
182+
$scope.percentages.normal.options = {
183+
floor: 0,
184+
ceil: 100,
185+
translate: formatToPercentage,
186+
showSelectionBar: true
187+
};
188+
$scope.percentages.range.options = {
189+
floor: 0,
190+
ceil: 100,
191+
translate: formatToPercentage
192+
};
193+
$scope.ok = function() {
194+
$modalInstance.close($scope.percentages);
195+
};
196+
$scope.cancel = function() {
197+
$modalInstance.dismiss();
198+
};
199+
},
200+
resolve: {
201+
values: function() {
202+
return $scope.percentages;
203+
}
204+
}
205+
});
206+
modalInstance.result.then(function(percentages) {
207+
$scope.percentages = percentages;
208+
});
209+
modalInstance.rendered.then(function() {
210+
$rootScope.$broadcast('rzSliderForceRender');//Force refresh sliders on render. Otherwise bullets are aligned at left side.
211+
});
212+
};
213+
214+
215+
//Slider inside tabs
216+
$scope.tabSliders = {
217+
slider1: {
218+
value: 100
219+
},
220+
slider2: {
221+
value: 200
222+
}
223+
};
224+
$scope.refreshSlider = function() {
225+
$timeout(function() {
226+
$scope.$broadcast('rzSliderForceRender');
227+
});
228+
};
229+
230+
231+
//Slider with draggable range
232+
$scope.slider_all_options = {
233+
minValue: 2,
156234
options: {
235+
floor: 0,
157236
ceil: 10,
158-
floor: 0
237+
step: 1,
238+
precision: 0,
239+
draggableRange: false,
240+
showSelectionBar: false,
241+
hideLimitLabels: false,
242+
readOnly: false,
243+
disabled: false,
244+
showTicks: false,
245+
showTicksValues: false
159246
}
160247
};
248+
$scope.toggleHighValue = function() {
249+
if($scope.slider_all_options.maxValue != null) {
250+
$scope.slider_all_options.maxValue = undefined;
251+
}
252+
else {
253+
$scope.slider_all_options.maxValue = 8;
254+
}
255+
}
161256
});

‎demo/index.html

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@
55
<meta charset="utf-8"/>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>AngularJS Touch Slider</title>
8-
<link rel="stylesheet" href="demo.css"/>
8+
<!-- Latest compiled and minified CSS -->
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
910
<link rel="stylesheet" href="../dist/rzslider.css"/>
11+
<link rel="stylesheet" href="demo.css"/>
1012
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
1113
</head>
1214

@@ -142,11 +144,63 @@ <h2>Toggle slider example</h2>
142144
</div>
143145
</article>
144146

147+
<article>
148+
<h2>Sliders inside a modal</h2>
149+
Normal slider value: {{percentages.normal.low}}%
150+
</br>
151+
Range slider values: {{percentages.range.low}}% and {{percentages.range.high}}%
152+
</br>
153+
<button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
154+
</article>
155+
156+
<article>
157+
<h2>Sliders inside tabs</h2>
158+
<p>Price 1: {{tabSliders.slider1.value}}</p>
159+
<p>Price 2: {{tabSliders.slider2.value}}</p>
160+
<tabset>
161+
<tab heading="Slider 1" select="refreshSlider()">
162+
<rzslider rz-slider-model="tabSliders.slider1.value"></rzslider>
163+
</tab>
164+
<tab heading="Slider 2" select="refreshSlider()">
165+
<rzslider rz-slider-model="tabSliders.slider2.value"></rzslider>
166+
</tab>
167+
</tabset>
168+
</article>
145169

170+
<article>
171+
<h2>Slider with all options demo</h2>
172+
<div class="row all-options">
173+
<div class="col-md-4">
174+
<label class="field-title">Min Value: </label><input type="number" ng-model="slider_all_options.minValue"/><br/>
175+
<label class="field-title"><input type="checkbox" ng-click="toggleHighValue()"> Max Value: </label>
176+
<input type="number" ng-model="slider_all_options.maxValue" ng-disabled="slider_all_options.maxValue == null"/><br/>
177+
<label class="field-title">Floor: </label><input type="number" ng-model="slider_all_options.options.floor"/><br/>
178+
<label class="field-title">Ceil: </label><input type="number" ng-model="slider_all_options.options.ceil"/><br/>
179+
</div>
180+
<div class="col-md-4">
181+
<label class="field-title">Step: </label><input type="number" ng-model="slider_all_options.options.step"/><br/>
182+
<label class="field-title">Precision: </label><input type="number" ng-model="slider_all_options.options.precision"/><br/>
183+
<label>Hide limits <input type="checkbox" ng-model="slider_all_options.options.hideLimitLabels"></label><br/>
184+
<label>Draggable range <input type="checkbox" ng-model="slider_all_options.options.draggableRange"></label>
185+
</div>
186+
<div class="col-md-4">
187+
<label>Show ticks <input type="checkbox" ng-model="slider_all_options.options.showTicks"></label><br/>
188+
<label>Show ticks values <input type="checkbox" ng-model="slider_all_options.options.showTicksValues"></label><br/>
189+
<label>Disabled <input type="checkbox" ng-model="slider_all_options.options.disabled"></label><br/>
190+
<label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label>
191+
</div>
192+
</div>
193+
<rzslider
194+
rz-slider-model="slider_all_options.minValue"
195+
rz-slider-high="slider_all_options.maxValue"
196+
rz-slider-options="slider_all_options.options"
197+
></rzslider>
198+
</article>
146199
</div>
147200

148201
</body>
149202
<script src="../bower_components/angular/angular.js"></script>
203+
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
150204
<script src="../dist/rzslider.js"></script>
151205
<script src="demo.js"></script>
152206
</html>

‎demo/sliderModal.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div class="modal-body">
2+
<div class="container-fluid">
3+
<div class="row">
4+
<div class="col-md-12 col-lg-12">
5+
<label class="control-label">Normal slider into modal</label>
6+
<rzslider
7+
rz-slider-model="percentages.normal.low"
8+
rz-slider-options="percentages.normal.options">
9+
</rzslider>
10+
</div>
11+
</div>
12+
<div class="row">
13+
<div class=" col-md-12 col-lg-12">
14+
<label class="control-label">Range slider into modal</label>
15+
<rzslider
16+
rz-slider-model="percentages.range.low"
17+
rz-slider-high="percentages.range.high"
18+
rz-slider-options="percentages.range.options">
19+
</rzslider>
20+
</div>
21+
</div>
22+
<div class="row">
23+
<div class="col-lg-12">
24+
<button type="button" ng-click="ok()" class="btn btn-primary">Save</button>
25+
<button type="button" ng-click="cancel()" class="btn btn-default">Cancel</button>
26+
</div>
27+
</div>
28+
</div>
29+
</div>

‎dist/rzslider.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ rzslider {
1616
display: inline-block;
1717
width: 100%;
1818
height: 4px;
19-
margin: 30px 0 15px 0;
19+
margin: 35px 0 15px 0;
2020
vertical-align: middle;
2121
-webkit-user-select: none;
2222
-moz-user-select: none;
@@ -55,6 +55,10 @@ rzslider .rz-bar-wrapper {
5555
box-sizing: border-box;
5656
}
5757

58+
rzslider .rz-bar-wrapper.rz-draggable {
59+
cursor: move;
60+
}
61+
5862
rzslider .rz-bar {
5963
left: 0;
6064
z-index: 1;

0 commit comments

Comments
 (0)