monster.ui.slider()#
Syntax#
monster.ui.slider(target, options);
Parameters#
Key | Description | Type | Default | Required |
---|---|---|---|---|
target |
A jQuery object inside which the slider will be inserted using the append() method. | jQuery |
true |
|
options |
Object (#/options) |
false |
options#
Key | Description | Type | Default | Required |
---|---|---|---|---|
i18n |
Define the text in the tooltips. | String |
false |
|
unit |
Unit of the value for the handles and limits. | String |
false |
|
friendlyPrint |
Takes the value returned by the slider and returns a different value, to make it look friendlier to the end-user. | Function |
false |
Return value#
A jQuery
object representing the slider widget.
Description#
The monster.ui.slider()
method allows you to generate a jQuery Slider with the look and feel of Monster UI. All the original options of the slider are available.
Examples#
Create a slider with a max and min handle#
var target = $('#slider');
var options = {
range: true,
min: 100,
max: 50000,
step: 100,
value: 1500,
unit: 'MB',
i18n: {
maxHandle: {
text: 'Throttle Data at:'
},
minHandle: {
text: 'Warn Administrators at:'
}
}
};
monster.ui.slider(target, options);
Create a slider with defined steps#
var target = $('#slider');
var options = {
range: 'max',
steps: [30, 60, 300, 1800, 3600],
value: 30,
friendlyPrint: function(val) {
return monster.util.friendlyTimer(val, 'shortVerbose');
},
i18n: {
maxHandle: {
text: "Abort After"
}
}
};
monster.ui.slider(target, options);
In this example, instead of displaying 3600 in the tooltip of the result, we would display "1 hour". In order to get the real value ("3600"), the developer needs to check the value stored in the data-real-value attribute of the slider ($('.slider-container [data-real-value]').attr('data-real-value') for example).