Skip to content

Commit 37dd274

Browse files
danielcrispdanielcrisp
committed
Bump version
1 parent 8e13dcd commit 37dd274

File tree

5 files changed

+273
-4
lines changed

5 files changed

+273
-4
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
angular-rangeslider
22
===================
3-
_Current version: 0.0.13_
3+
_Current version: 0.0.14_
44

55
Angular RangeSlider is a directive that creates an interactive slider that allows a user to change model values.
66

@@ -99,6 +99,8 @@ Options are set as attributes on the `<div range-slider>`
9999

100100
`on-handle-down` - call a function whenever a handle is grabbed
101101

102+
`getter-setter` - enable getter / setter support for model values - options: `true` | `false`
103+
102104
Some more examples
103105
------------------
104106

‎angular.rangeSlider.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Angular RangeSlider SCSS
33
*
4-
* Version: 0.0.13
4+
* Version: 0.0.14
55
*
66
* Author: Daniel Crisp, danielcrisp.com
77
*

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-rangeslider",
3-
"version": "0.0.13",
3+
"version": "0.0.14",
44
"main": [
55
"./angular.rangeSlider.js",
66
"./angular.rangeSlider.css"

‎index.html‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7+
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
8+
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen" />
9+
<link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen" />
10+
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print" />
11+
12+
<!--[if lt IE 9]>
13+
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
14+
<![endif]-->
15+
16+
<title>AngularJS RangeSlider by danielcrisp</title>
17+
</head>
18+
19+
<body>
20+
<header>
21+
<div class="inner">
22+
<h1>AngularJS RangeSlider</h1>
23+
<h2>Simple directive that creates a range slider for Angular, styled to match Bootstrap-styled form elements</h2>
24+
<a href="https://github.com/danielcrisp/angular-rangeslider" class="button"><small>View project on</small>GitHub</a>
25+
</div>
26+
</header>
27+
28+
<div id="content-wrapper">
29+
<div class="inner clearfix">
30+
<section id="main-content">
31+
<h1>
32+
<a name="angular-rangeslider" class="anchor" href="#angular-rangeslider"><span class="octicon octicon-link"></span></a>AngularJS RangeSlider</h1>
33+
34+
<p><em>Current version: 0.0.14</em></p>
35+
36+
<p>Angular RangeSlider is a directive that creates an interactive slider that allows a user to change model values.</p>
37+
38+
<p>It has been styled to match form elements styled by <a href="http://twitter.github.io/bootstrap/">Twitter's Bootstrap CSS framework</a>.</p>
39+
40+
<h4>
41+
<a name="requirements" class="anchor" href="#requirements"><span class="octicon octicon-link"></span></a>Requirements</h4>
42+
43+
<ul>
44+
<li>Angular (v1.0.8+)</li>
45+
<li>jQuery (v1.7+)</li>
46+
</ul>
47+
48+
<h2>
49+
<a name="quick-example" class="anchor" href="#quick-example"><span class="octicon octicon-link"></span></a>Demo</h2>
50+
51+
<p>Take a look at the <a href="demo/">live demo page</a></p>
52+
53+
<p>Or the <a href="demo/legacy.html">legacy Angular demo page</a></p>
54+
55+
<h2>
56+
<a name="quick-example" class="anchor" href="#quick-example"><span class="octicon octicon-link"></span></a>Quick example</h2>
57+
58+
<p>A basic slider with a range of 0 to 100:</p>
59+
60+
<pre><code>&lt;div range-slider min="0" max="100" model-min="min" model-max="max"&gt;&lt;/div&gt;
61+
</code></pre>
62+
63+
<p>As the handles are moved the model values <code>min</code> and <code>max</code> will be updated in the parent controller.</p>
64+
65+
<p><img src="screenshots/slider.png" alt="Default example"></p>
66+
67+
<h2>
68+
<a name="options" class="anchor" href="#options"><span class="octicon octicon-link"></span></a>Options</h2>
69+
70+
<p>Options are set as attributes on the <code>&lt;div range-slider&gt;</code></p>
71+
72+
<h3>
73+
<a name="-two-way-bindings" class="anchor" href="#-two-way-bindings"><span class="octicon octicon-link"></span></a><code>=</code> two-way bindings</h3>
74+
75+
<p><code>min</code> - the minimum value the user can select (must be a number, can be a model property)</p>
76+
77+
<p><code>max</code> - the maximum value the user can select (must be a number, can be a model property)</p>
78+
79+
<p><code>model-min</code> - the model property for the min value, represents the position of the min handle</p>
80+
81+
<p><code>model-max</code> - the model property for the max value, represents the position of the max handle</p>
82+
83+
<p><code>disabled</code> - model property or boolean, disables the slider when <code>true</code></p>
84+
85+
<h3>
86+
<a name="-attributes" class="anchor" href="#-attributes"><span class="octicon octicon-link"></span></a><code>@</code> attributes</h3>
87+
88+
<p><code>orientation</code> - slider orientation, default: 'horizontal' - options: 'horizontal' | 'vertical' | 'vertical left' | 'vertical right'</p>
89+
90+
<p><code>step</code> - amount to change the value by when moving a handle, default: 0</p>
91+
92+
<p><code>decimal-places</code> - the number of decimal places to round to, default: 0</p>
93+
94+
<p><code>filter</code> - a built-in filter to apply to the displayed values, for example <code>currency</code> or <code>currency:'$'</code></p>
95+
96+
<p><code>filter-options</code> - options to pass to the filter</p>
97+
98+
<p><code>pin-handle</code> - disable/hide one handle, default: null - options: 'min' | 'max'</p>
99+
100+
<p><code>prevent-equal-min-max</code> - prevent the <code>min</code> and <code>max</code> values from being equal. The <code>step</code> value is used to set the minimum difference, otherwise a value of <code>1</code> is used.</p>
101+
102+
<p><code>attach-handle-values</code> - move the value labels in sync with the slider handles when <code>true</code>, default: <code>false</code></p>
103+
104+
<h2>
105+
<a name="some-more-examples" class="anchor" href="#some-more-examples"><span class="octicon octicon-link"></span></a>Some more examples</h2>
106+
107+
<h3>
108+
<a name="using-model-properties" class="anchor" href="#using-model-properties"><span class="octicon octicon-link"></span></a>Using model properties</h3>
109+
110+
<p>The following properties are present in the scope:</p>
111+
112+
<pre><code>// set available range
113+
$scope.minPrice = 100;
114+
$scope.maxPrice = 999;
115+
116+
// default the user's values to the available range
117+
$scope.userMinPrice = $scope.minPrice;
118+
$scope.userMaxPrice = $scope.maxPrice;
119+
</code></pre>
120+
121+
<p>So we can include the directive in the HTML like this:</p>
122+
123+
<pre><code>&lt;div range-slider min="minPrice" max="maxPrice" model-min="userMinPrice" model-max="userMaxPrice" step="5"&gt;&lt;/div&gt;
124+
</code></pre>
125+
126+
<p>As the user moves the min and max handles the <code>userMinPrice</code> and <code>userMaxPrice</code> will be updated in increments of <code>5</code> in real-time in the model.</p>
127+
128+
<h3>
129+
<a name="using-filters" class="anchor" href="#using-filters"><span class="octicon octicon-link"></span></a>Using filters</h3>
130+
131+
<p>Continuing from the example above we can format the values displayed to the user as currency.</p>
132+
133+
<pre><code>&lt;div range-slider min="minPrice" max="maxPrice" model-min="userMinPrice" model-max="userMaxPrice" step="5" filter="currency"&gt;&lt;/div&gt;
134+
</code></pre>
135+
136+
<p>This will automatically be localised by Angular, but we can force it to be USD by passing this as an option:</p>
137+
138+
<pre><code>&lt;div range-slider min="minPrice" max="maxPrice" model-min="userMinPrice" model-max="userMaxPrice" step="5" filter="currency" filter-options="USD$"&gt;&lt;/div&gt;
139+
</code></pre>
140+
141+
<p>Alternatively you can use Angular's filter notation directly in the <code>filter</code> attribute, such as <code>filter="currency:'GBP £'"</code>, which would result in values like this: <code>GBP £7,500.00</code>.</p>
142+
143+
<pre><code>&lt;div range-slider min="minPrice" max="maxPrice" model-min="userMinPrice" model-max="userMaxPrice" step="5" filter="currency:'GBP £'"&gt;&lt;/div&gt;
144+
</code></pre>
145+
146+
<p><strong>NOTE:</strong> If the <code>filter-options</code> attribute is defined you **cannot** use Angular filter notation. You must only use the filter name in the <code>filter</code> attribute.
147+
148+
<p><img src="screenshots/currency.png" alt="Currency example"></p>
149+
150+
<h3>
151+
<a name="making-the-slider-vertical" class="anchor" href="#making-the-slider-vertical"><span class="octicon octicon-link"></span></a>Making the slider vertical</h3>
152+
153+
<p>Simply add one of the following values to the <code>orientation</code> attribute: 'vertical', 'vertical left' or 'vertical right'.</p>
154+
155+
<p>This will create a vertical slider that is centred in it's parent element:</p>
156+
157+
<pre><code>&lt;div range-slider min="0" max="100" model-min="min" model-max="max" orientation="vertical"&gt;&lt;/div&gt;
158+
</code></pre>
159+
160+
<p><img src="screenshots/vertical.png" alt="Vertical example"></p>
161+
162+
<p>To left-align the slider use 'vertical left':</p>
163+
164+
<pre><code>&lt;div range-slider min="0" max="100" model-min="min" model-max="max" orientation="vertical left"&gt;&lt;/div&gt;
165+
</code></pre>
166+
167+
<p>And to right-align the slider use 'vertical right':</p>
168+
169+
<pre><code>&lt;div range-slider min="0" max="100" model-min="min" model-max="max" orientation="vertical right"&gt;&lt;/div&gt;
170+
</code></pre>
171+
172+
<h3>
173+
<a name="disabling-the-slider" class="anchor" href="#disabling-the-slider"><span class="octicon octicon-link"></span></a>Disabling the slider</h3>
174+
175+
<p>If you have a boolean property in your scope you can simply change this value to <code>true</code> to disable the slider:</p>
176+
177+
<pre><code>$scope.sliderDisabled = false;
178+
</code></pre>
179+
180+
<p>And then specify the property using the disabled attribute:</p>
181+
182+
<pre><code>&lt;div range-slider min="0" max="100" model-min="min" model-max="max" disabled="sliderDisabled"&gt;&lt;/div&gt;
183+
184+
// clicking this button will toggle the sliderDisabled value between true and false
185+
&lt;button ng-click="sliderDisabled=!sliderDisabled"&gt;Toggle slider disabled status&lt;/button&gt;
186+
</code></pre>
187+
188+
<p><img src="screenshots/disabled.png" alt="Disabled example"></p>
189+
190+
<h3>
191+
<a name="pinning-a-handle" class="anchor" href="#pinning-a-handle"><span class="octicon octicon-link"></span></a>Pinning a handle</h3>
192+
193+
<p>If you would like only allow setting one value, effectively creating a single-value silder, set the pin-handle attribute to 'min' or 'max'. You may then omit the corresponding model-xxx property:</p>
194+
195+
<pre><code>&lt;div range-slider min="0" max="100" model-max="max" pin-handle="min&gt;&lt;/div&gt;
196+
</code></pre>
197+
198+
<p><img src="screenshots/pinned.png" alt="Pinned example"></p>
199+
200+
<h2>
201+
<a name="to-do" class="anchor" href="#to-do"><span class="octicon octicon-link"></span></a>To Do</h2>
202+
203+
<ul>
204+
<li>Remove full jQuery dependency</li>
205+
<li>Make it work in older Angular versions</li>
206+
<li>Add option to move values with handles</li>
207+
<li>Improve behaviour when model values are not valid (e.g. min is greater than max)</li>
208+
</ul><h2>
209+
<a name="known-issues" class="anchor" href="#known-issues"><span class="octicon octicon-link"></span></a>Known Issues</h2>
210+
211+
<ul>
212+
<li>The slider restricts the model value when editing outside the slider (e.g. in an ) but the only notification is made to the <code>console</code>
213+
</li>
214+
<li>The min slider handle disappears behind the max slider handle</li>
215+
</ul><h2>
216+
<a name="credits" class="anchor" href="#credits"><span class="octicon octicon-link"></span></a>Credits</h2>
217+
218+
<p>This was originally forked from <a href="http://refreshless.com/">Léon Gersen's</a> brilliant noUiSlider:</p>
219+
220+
<p><a href="https://github.com/leongersen/noUiSlider">https://github.com/leongersen/noUiSlider</a></p>
221+
222+
<h2>
223+
<a name="licence" class="anchor" href="#licence"><span class="octicon octicon-link"></span></a>Licence</h2>
224+
225+
<p>This code is released under the <a href="http://opensource.org/licenses/MIT">MIT Licence</a></p>
226+
227+
<p>Copyright (c) 2013 Daniel Crisp</p>
228+
229+
<p>Permission is hereby granted, free of charge, to any person obtaining a copy
230+
of this software and associated documentation files (the "Software"), to deal
231+
in the Software without restriction, including without limitation the rights
232+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
233+
copies of the Software, and to permit persons to whom the Software is
234+
furnished to do so, subject to the following conditions:</p>
235+
236+
<p>The above copyright notice and this permission notice shall be included in
237+
all copies or substantial portions of the Software.</p>
238+
239+
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
240+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
241+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
242+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
243+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
244+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
245+
THE SOFTWARE.</p>
246+
</section>
247+
248+
<aside id="sidebar">
249+
<a href="https://github.com/danielcrisp/angular-rangeslider/zipball/master" class="button">
250+
<small>Download</small>
251+
.zip file
252+
</a>
253+
<a href="https://github.com/danielcrisp/angular-rangeslider/tarball/master" class="button">
254+
<small>Download</small>
255+
.tar.gz file
256+
</a>
257+
258+
<p class="repo-owner"><a href="https://github.com/danielcrisp/angular-rangeslider"></a> is maintained by <a href="https://github.com/danielcrisp">danielcrisp</a>.</p>
259+
260+
<p>This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the Architect theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.</p>
261+
</aside>
262+
</div>
263+
</div>
264+
265+
266+
</body>
267+
</html>

‎scss/angular.rangeSlider.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Angular RangeSlider SCSS
33
*
4-
* Version: 0.0.13
4+
* Version: 0.0.14
55
*
66
* Author: Daniel Crisp, danielcrisp.com
77
*

0 commit comments

Comments
 (0)