You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A "fork" of bootstrap-slider found on http://www.eyecon.ro/ originally by Stefan Petre.
3
+
Originally began as a loose "fork" of bootstrap-slider found on http://www.eyecon.ro/ by Stefan Petre.
4
+
5
+
Over time, this project has diverged sigfinicantly from Stefan Petre's version and is now almost completly different.
6
+
7
+
__Please ensure that you are using this library instead of the Petre version before creating issues in the repository Issue tracker!!__
4
8
5
9
Installation
6
10
============
7
11
Clone the repository, then run `npm install`
8
12
9
13
Want to use bower? `bower install seiyria-bootstrap-slider`
10
14
15
+
Then load the plugin CSS and JavaScript into your web page, and everything should work!
16
+
17
+
Remember to load the plugin code after loading the Bootstrap CSS and JQuery.
18
+
19
+
__JQuery is optional and the plugin can operate with or without it.__
20
+
21
+
Look below to see an example of how to interact with the non-JQuery interface.
22
+
23
+
Supported Browsers
24
+
========
25
+
__We only support modern browsers!!! Basically, anything below IE9 is not compatible with this plugin!__
26
+
11
27
Examples
12
28
========
13
29
You can see all of our API examples [here](http://seiyria.github.io/bootstrap-slider/).
14
30
15
-
Using bootstrap-slider
31
+
Using bootstrap-slider (with JQuery)
16
32
======================
17
33
18
34
Create an input element and call .slider() on it:
19
35
20
36
```js
21
-
$("input.slider").slider();
37
+
// Instantiate a slider
38
+
var mySlider =$("input.slider").slider();
39
+
40
+
// Call a method on the slider
41
+
var value =mySlider.slider('getValue');
42
+
43
+
// For non-getter methods, you can chain together commands
44
+
mySlider
45
+
.slider('setValue', 5)
46
+
.slider('setValue', 7);
47
+
```
48
+
49
+
If there is already a JQuery plugin named _slider_ bound to the namespace, then this plugin will take on the alternate namespace _bootstrapSlider_.
50
+
51
+
```
52
+
// Instantiate a slider
53
+
var mySlider = $("input.slider").bootstrapSlider();
54
+
55
+
// Call a method on the slider
56
+
var value = mySlider.bootstrapSlider('getValue');
57
+
58
+
// For non-getter methods, you can chain together commands
59
+
mySlider
60
+
.bootstrapSlider('setValue', 5)
61
+
.bootstrapSlider('setValue', 7);
62
+
```
63
+
64
+
Using bootstrap-slider (without JQuery)
65
+
======================
66
+
67
+
Create an input element in the DOM, and then create an instance of Slider, passing it a selector string referencing the input element.
68
+
69
+
```js
70
+
// Instantiate a slider
71
+
var mySlider =newSlider("input.slider", {
72
+
// initial options object
73
+
});
74
+
75
+
// Call a method on the slider
76
+
var value =mySlider.getValue();
77
+
78
+
// For non-getter methods, you can chain together commands
79
+
mySlider
80
+
.setValue(5)
81
+
.setValue(7);
22
82
```
83
+
23
84
Options
24
85
=======
25
86
Options can be passed either as a data (data-slider-foo) attribute, or as part of an object in the slider call. The only exception here is the formater argument - that can not be passed as a data- attribute.
@@ -42,31 +103,33 @@ Options can be passed either as a data (data-slider-foo) attribute, or as part o
| reversed | bool | false | whether or not the slider should be reversed |
44
105
| enabled | bool | true | whether or not the slider is initially enabled |
45
-
|formater| function | returns the plain value | formatter callback. Return the value wanted to be displayed in the tooltip |
106
+
|formatter| function | returns the plain value | formatter callback. Return the value wanted to be displayed in the tooltip |
46
107
| natural_arrow_keys | bool | false | The natural order is used for the arrow keys. Arrow up select the upper slider value for vertical sliders, arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not. By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value. |
47
108
48
109
Functions
49
110
=========
50
-
| Function | Description |
51
-
| -------- | ----------- |
52
-
| .slider(options) | Initializes the slider |
53
-
| .slider('getValue') | Get the current value from the slider |
54
-
| .slider('setValue', newValue, [triggerSlideEvent]) | Set a new value for the slider. If optional triggerSlideEvent parameter is _true_, the 'slide' event will be triggered. |
55
-
| .slider('destroy') | Properly clean up and remove the slider instance |
56
-
| .slider('disable') | Disables the slider and prevents the user from changing the value |
57
-
| .slider('enable') | Enables the slider |
58
-
| .slider('toggle') | Toggles the slider between enabled and disabled |
59
-
| .slider('isEnabled') | Returns true if enabled, false if disabled |
60
-
| .slider('setAttribute', [attribute], [value]) | Updates the slider's [attributes](#options)|
61
-
| .slider('getAttribute', [attribute]) | Get the slider's [attributes](#options)|
62
-
| .slider('refresh') | Refreshes the current slider |
111
+
__NOTE:__ Optional parameters are italisized.
112
+
113
+
| Function | Parameters | Description |
114
+
| -------- | ----------- | ----------- |
115
+
| getValue | --- | Get the current value from the slider |
116
+
| setValue | newValue, _triggerSlideEvent_| Set a new value for the slider. If optional triggerSlideEvent parameter is _true_, the 'slide' event will be triggered. |
117
+
| destroy | --- | Properly clean up and remove the slider instance |
118
+
| disable | ---| Disables the slider and prevents the user from changing the value |
119
+
| enable | --- | Enables the slider |
120
+
| toggle | --- | Toggles the slider between enabled and disabled |
121
+
| isEnabled | --- |Returns true if enabled, false if disabled |
122
+
| setAttribute | attribute, value | Updates the slider's [attributes](#options)|
123
+
| getAttribute | attribute | Get the slider's [attributes](#options)|
124
+
| refresh | --- | Refreshes the current slider |
125
+
| on | eventType, callback | When the slider event _eventType_ is triggered, the callback function will be invoked |
63
126
64
127
Events
65
128
======
66
129
| Event | Description |
67
130
| ----- | ----------- |
68
-
| slideStart | This event fires when dragging starts |
69
131
| slide | This event fires when the slider is dragged |
132
+
| slideStart | This event fires when dragging starts |
70
133
| slideStop | This event fires when the dragging stops |
71
134
| slideEnabled | This event fires when the slider is enabled |
72
135
| slideDisabled | This event fires when the slider is disabled |
Copy file name to clipboardExpand all lines: composer.json
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,9 +1,9 @@
1
1
{
2
-
"name": "zardo/bootstrap-slider",
2
+
"name": "seiyria/bootstrap-slider",
3
3
"type": "library",
4
4
"description": "A less buggy fork of the original bootstrap slider found on http://www.eyecon.ro/ by Stefan Petre. It was forked so we could update the slider since the original wasn't under version control.",
0 commit comments