monster.ui.slider()

Syntax

monster.ui.slider(target, options);

Parameters

target: jQuery object (mandatory)

A jQuery object inside which the slider will be inserted using the append() method.

options: Object (mandatory)

Let you specify a map of options for the slider, they are the same than for the jQuery Slider method. It also takes three more custom, and optional, parameters:

  • i18n: String (optional) - define the text in the tooltips
  • unit: String (optional) - unit of the value for the handles and limits
  • friendlyPrint: Function (optional) - takes the value returned by the slider and returns a different value, to make it look friendlier to the end-user

Return

This method returns the slider container as a jQuery object.

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'),
    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 a set of steps that the end-user will have to choose from. We also show the use of the friendlyPrint function, which will take the value selected by the user and return a different value, that would be more meaningful to the end-user.

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).

var target = $('#slider'),
    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);

Edit this page here