Skip to content

Commit 61ca53c

Browse files
author
Valentin Hervieu
committed
Fixes #108. Also add ng-show example showing the usage of rzSliderForceRender
1 parent 05cbdc8 commit 61ca53c

File tree

6 files changed

+99
-76
lines changed

6 files changed

+99
-76
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angularjs-slider",
3-
"version": "0.1.27",
3+
"version": "0.1.28",
44
"homepage": "https://github.com/rzajac/angularjs-slider",
55
"authors": [
66
"Rafal Zajac <rzajac@gmail.com>",

‎demo/index.html

+92-69
Original file line numberDiff line numberDiff line change
@@ -2,112 +2,122 @@
22
<html ng-app="plunker">
33

44
<head>
5-
<meta charset="utf-8" />
5+
<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" />
9-
<link rel="stylesheet" href="../dist/rzslider.css" />
8+
<link rel="stylesheet" href="demo.css"/>
9+
<link rel="stylesheet" href="../dist/rzslider.css"/>
1010
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
1111
</head>
1212

1313
<body ng-controller="MainCtrl">
1414

15-
<div class="wrapper">
16-
<header>
17-
<h1>AngularJS Touch Slider</h1>
18-
</header>
19-
20-
<article>
21-
<h2>Min/max slider example</h2>
22-
Value: <pre>{{ slider_data | json }}</pre>
23-
<p>Value linked on change: {{ otherData.value }}</p>
24-
25-
<rzslider
26-
rz-slider-floor="0.5"
27-
rz-slider-ceil="10.5"
28-
rz-slider-step="0.3"
29-
rz-slider-precision="1"
30-
rz-slider-model="slider_data.value"
31-
rz-slider-on-change="onChange()"></rzslider>
32-
</article>
33-
34-
<article>
35-
<h2>Min/max slider example</h2>
36-
Value: <pre>{{ priceSlider | json }}</pre>
37-
38-
<input type="text" ng-model="priceSlider.min"/><br/>
39-
<input type="text" ng-model="priceSlider.max"/><br/>
40-
41-
<rzslider
15+
<div class="wrapper">
16+
<header>
17+
<h1>AngularJS Touch Slider</h1>
18+
</header>
19+
20+
<article>
21+
<h2>Min/max slider example</h2>
22+
Value:
23+
<pre>{{ slider_data | json }}</pre>
24+
<p>Value linked on change: {{ otherData.value }}</p>
25+
26+
<rzslider
27+
rz-slider-floor="0.5"
28+
rz-slider-ceil="10.5"
29+
rz-slider-step="0.3"
30+
rz-slider-precision="1"
31+
rz-slider-model="slider_data.value"
32+
rz-slider-on-change="onChange()"></rzslider>
33+
</article>
34+
35+
<article>
36+
<h2>Min/max slider example</h2>
37+
Value:
38+
<pre>{{ priceSlider | json }}</pre>
39+
40+
<input type="text" ng-model="priceSlider.min"/><br/>
41+
<input type="text" ng-model="priceSlider.max"/><br/>
42+
43+
<rzslider
4244
rz-slider-floor="priceSlider.floor"
4345
rz-slider-ceil="priceSlider.ceil"
4446
rz-slider-model="priceSlider.min"
4547
rz-slider-high="priceSlider.max"
4648
rz-slider-step="6"
4749
rz-slider-tpl-url="rzSliderTpl.html"></rzslider>
48-
</article>
50+
</article>
4951

50-
<article>
51-
<h2>Currency slider example</h2>
52+
<article>
53+
<h2>Currency slider example</h2>
5254

53-
Value: {{ priceSlider2 | json }}
54-
<rzslider
55+
Value: {{ priceSlider2 | json }}
56+
<rzslider
5557
rz-slider-floor="0"
5658
rz-slider-ceil="450"
5759
rz-slider-model="priceSlider2"
5860
rz-slider-translate="translate"
5961
rz-slider-tpl-url="rzSliderTpl.html"></rzslider>
60-
</article>
61-
62-
<article>
63-
<h2>One value slider example</h2>
64-
65-
Value: {{ priceSlider3 | json }}
66-
<rzslider rz-slider-model="priceSlider3"
67-
rz-slider-floor="50"
68-
rz-slider-ceil="450"
69-
rz-slider-always-show-bar="true"
70-
rz-slider-tpl-url="rzSliderTpl.html"></rzslider>
71-
</article>
72-
73-
<article>
74-
<h2>Alphabet slider example</h2>
75-
Value: {{ alphabetTranslate(letter) }}
76-
<rzslider
62+
</article>
63+
64+
<article>
65+
<h2>One value slider example</h2>
66+
67+
Value: {{ priceSlider3 | json }}
68+
<rzslider rz-slider-model="priceSlider3"
69+
rz-slider-floor="50"
70+
rz-slider-ceil="450"
71+
rz-slider-always-show-bar="true"
72+
rz-slider-tpl-url="rzSliderTpl.html"></rzslider>
73+
</article>
74+
75+
<article>
76+
<h2>Alphabet slider example</h2>
77+
Value: {{ alphabetTranslate(letter) }}
78+
<rzslider
7779
rz-slider-floor="0"
7880
rz-slider-ceil="letterMax"
7981
rz-slider-model="letter"
8082
rz-slider-translate="alphabetTranslate"
8183
rz-slider-tpl-url="rzSliderTpl.html"></rzslider>
82-
</article>
84+
</article>
8385

84-
<article>
85-
<h2>Draggable range example</h2>
86-
Value: <pre>{{ priceSlider | json }}</pre>
86+
<article>
87+
<h2>Draggable range example</h2>
88+
Value:
89+
<pre>{{ priceSlider | json }}</pre>
8790

88-
<input type="text" ng-model="priceSlider.min"/><br/>
89-
<input type="text" ng-model="priceSlider.max"/><br/>
91+
<input type="text" ng-model="priceSlider.min"/><br/>
92+
<input type="text" ng-model="priceSlider.max"/><br/>
9093

91-
<rzslider
94+
<rzslider
9295
rz-slider-draggable-range="true"
9396
rz-slider-floor="priceSlider.floor"
9497
rz-slider-ceil="priceSlider.ceil"
9598
rz-slider-model="priceSlider.min"
9699
rz-slider-high="priceSlider.max"
97100
rz-slider-step="5"
98101
rz-slider-tpl-url="rzSliderTpl.html"></rzslider>
99-
</article>
102+
</article>
103+
104+
<article>
105+
<h2>Toggle slider example</h2>
106+
<button ng-click="toggle()">Show</button>
107+
<div ng-show="visible">
108+
<rzslider rz-slider-model="toggleSlider.value" rz-slider-floor="toggleSlider.floor" rz-slider-ceil="toggleSlider.ceil"></rzslider>
109+
</div>
110+
</article>
100111

101-
</div>
112+
</div>
102113
</body>
103114

104115
<script src="../bower_components/angular/angular.min.js"></script>
105116
<script src="../rzslider.js"></script>
106117
<script>
107118
var app = angular.module('plunker', ['rzModule']);
108119

109-
app.controller('MainCtrl', function($scope)
110-
{
120+
app.controller('MainCtrl', function($scope, $timeout) {
111121
$scope.priceSlider = {
112122
min: 100,
113123
max: 400,
@@ -118,25 +128,38 @@ <h2>Draggable range example</h2>
118128
$scope.priceSlider2 = 150;
119129
$scope.priceSlider3 = 250;
120130

121-
$scope.translate = function(value)
122-
{
131+
$scope.translate = function(value) {
123132
return '$' + value;
124133
};
125134

126135
var alphabetArray = 'abcdefghijklmnopqrstuvwxyz'.split('');
127136
$scope.letter = 5;
128137
$scope.letterMax = alphabetArray.length - 1;
129-
$scope.alphabetTranslate = function(value)
130-
{
138+
$scope.alphabetTranslate = function(value) {
131139
return alphabetArray[value].toUpperCase();
132140
};
133141

134142
$scope.slider_data = {value: 1};
135143
$scope.otherData = {value: 10};
136144

137145
$scope.onChange = function() {
138-
console.info('changed', $scope.slider_data.value);
139-
$scope.otherData.value = $scope.slider_data.value * 10;
146+
console.info('changed', $scope.slider_data.value);
147+
$scope.otherData.value = $scope.slider_data.value * 10;
148+
};
149+
150+
$scope.visible = false;
151+
152+
$scope.toggle = function() {
153+
$scope.visible = !$scope.visible;
154+
$timeout(function() {
155+
$scope.$broadcast('rzSliderForceRender');
156+
});
157+
};
158+
159+
$scope.toggleSlider = {
160+
value: 0,
161+
ceil: 500,
162+
floor: 0
140163
};
141164
});
142165
</script>

‎dist/rzslider.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)