Skip to content

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