| Property |
Type |
Description |
|
| $arrows |
|
lets you remove scrolling arrows on both sides of the slider. Defaults to true. |
|
| $delayOut |
|
lets you specify the duration labels are shown after the user changed its values. Defaults to null.
Note: This option can only be used in conjunction with 'valueLabels'=>'change' |
|
| $durationIn |
|
lets you specify the animation length when displaying value labels. Similarly,durationOut allows to
customize the animation duration when hiding those labels. Defaults to null.
Note: This option can only be used in conjunction with 'valueLabels'=>'change' |
|
| $durationOut |
|
lets you specify the animation length when hiding value labels. Similarly,durationIn allows to
customize the animation duration when displaying those labels. Defaults to null.
Note: This option can only be used in conjunction with 'valueLabels'=>'change' |
|
| $events |
|
string[] the events to monitor.
Possible events:
- valuesChanging
- valuesChanged
- userValuesChanged
### valuesChanging
Use the event valuesChanging if you want to intercept events while the user is moving an element in the slider.
Warning: Use this event wisely, because it is fired very frequently. It can have impact on performance. When
possible, prefer the valuesChanged event.
'events' => array(
"valuesChanging"=>'js:function(e, data){ console.log("Something moved. min: " + data.values.min +
" max: " + data.values.max);})'
)
### valuesChanged
Use the event valuesChanged when you want to intercept events once values are chosen.
This event is only triggered once after a move.
'events' => array(
"valuesChanged", 'js:function(e, data){
console.log("Values just changed. min: " + data.values.min + " max: " + data.values.max);
}'
)
### userValuesChanged
Like the valuesChanged event, the userValuesChanged is fired after values finished changing. But, unlike the
previous one, userValuesChanged is only fired after the user interacted with the slider. Not when you changed
values programmatically.
'events' => array(
"userValuesChanged", 'js:function(e, data){
console.log("This changes when user interacts with slider");
}'
)
|
|
| $formatter |
|
a javascript function that lets you customize displayed label text.
Example:
```
'formater'=>'js:function(val){
var value = Math.round(val * 5) / 5,
decimal = value - Math.round(val);
return decimal == 0 ? value.toString() + ".0" : value.toString();
}' |
|
| $inputType |
|
allows to specify input types in edit slider. Possible values are 'text' (default) and 'number'.
Note: This option is only available on editRange type. |
|
| $maxDefaultValue |
|
lets you specify max valuee by default on construction of the widget. Defaults to 100.
Note when using 'dateRange' type, this value can be a string representing a javascript date. For
example: 'minDefaultValue'=>'js:new Date( 2012, 0, 1)' |
|
| $maxRange |
|
see minRange documentation above. |
|
| $maxValue |
|
lets you specify the max bound value of the range. This value Defaults to 100.
Note when using 'dateRange' type, this value can be a string representing a javascript date. For
example: 'maxValue'=>'js:new Date( 2012, 0, 1)' |
|
| $minDefaultValue |
|
lets you specify min value by default on construction of the widget. Defaults to 0.
Note when using 'dateRange' type, this value can be a string representing a javascript date. For
example: 'minDefaultValue'=>'js:new Date( 2012, 0, 1)' |
|
| $minRange |
|
lets you specify minimum range length. It works in conjunction with maxRange.
For instance, let's consider you want the user to choose a range of dates during 2012. You can constraint people
to choose at least 1 week during this period. Similarly, you also can constraint the user to choose 90 days at
maximum.
When this option is activated, the slider constraints the user input. When minimum or maximum value is reached,
the user cannot move an extremity further to shrink/enlarge the selected range. |
|
| $minValue |
|
lets you specify the min bound value of the range. This value Defaults to 0.
Note when using 'dateRange' type, this value can be string representing a javascript date. For
example: 'minValue'=>'js:new Date( 2012, 0, 1)' |
|
| $scales |
|
The option scales lets you add a ruler with multiple scales to the slider background.
'scales' => array(
primary scale
array(
'first'=>'js:function(val){return val;},
'next'=>'js:function(val){return val+10;}',
'stop'=>'js:function(val){return false;}',
'label'=>'js:function(val){return val;}',
'format'=> 'js:function(tickContainer, tickStart, tickEnd){
tickContainer.addClass("myCustomClass");
}'
),
secondary scale
array(
'first'=>'js:function(val){return val;},
'next'=>'js:function(val){ if(val%10 === 9){return val+2;} return val + 1;}',
'stop'=>'js:function(val){return false;}',
'label'=>'js:function(val){return null;}',
),
)
|
|
| $step |
|
allows to customize values rounding, and graphically render this rounding. Considering you configured a
slider with a step value of 10: it'll only allow your user to choose a value corresponding to minBound + 10n.
Warning For the date slider there is a small variation, the following is an example with days:
```
\\...
'step'=>array('days'=>2)
\\... |
|
| $theme |
|
the theme to use with the slider. Supported values are "iThing" and "classic" |
|
| $type |
|
lets you specify what type of jQRangeSlider you wish to display. Defaults to "range". Possible values
are:
- 'range'
- 'editRange'
- 'dateRange' |
|
| $valueLabels |
|
lets you specify a display mode for value labels: hide, show, or only shown when moving.
Possible values are: show, hide and change. |
|
| $wheelMode |
|
allows to use the mouse wheel to scroll (translate) or zoom (enlarge/shrink) the selected area in
jQRangeSlider. Defaults to null.
Note: This option requires the plugin jquery mousehwheel to be loaded |
|
| $wheelSpeed |
|
lets you customize the speed of mouse wheel interactions. This parameter requires the wheelMode to be set. |
|