Categories

.slider()

Categories: UI

.slider( [ options ] )

Plugin: jQuery.ui.slider

Description: Apply the Slider widget for each element in the set of matched elements

  • .slider( [ options ] )

    version added: 1.0

    options   A map of additional options pass to the widget.

The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.

The start, slide, and stop callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

The slider widget will create handle elements with the class 'ui-slider-handle' on initialization. You can specify custom handle elements by creating and appending the elements and adding the 'ui-slider-handle' class before init. It will only create the number of handles needed to match the length of value/values. For example, if you specify 'values: [1, 5, 18]' and create one custom handle, the plugin will create the other two.

  • ui.handle: DOMElement - the current focused handle
  • ui.value: Integer - the current handle's value
  • disabled

    Disables (true) or enables (false) the slider. Can be set when initialising (first creating) the slider.

    Default: false

  • animate

    Whether to slide handle smoothly when user click outside handle on the bar. Will also accept a string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

    Default: false

  • max

    The maximum value of the slider.

    Default: 100

  • min

    The minimum value of the slider.

  • orientation

    This option determines whether the slider has the min at the left, the max at the right or the min at the bottom, the max at the top. Possible values: 'horizontal', 'vertical'.

    Default: 'horizontal'

  • range

    If set to true, the slider will detect if you have two handles and create a stylable range element between these two. Two other possible values are 'min' and 'max'. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.

    Default: false

  • step

    Determines the size or amount of each interval or step the slider takes between min and max. The full specified value range of the slider (max - min) needs to be evenly divisible by the step.

    Default: 1

  • value

    Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.

  • values

    This option can be used to specify multiple handles. If range is set to true, the length of 'values' should be 2.

    Default: null

  • create

    This event is triggered when slider is created.

  • start

    This event is triggered when the user starts sliding.

  • slide

    This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value. Return false in order to prevent a slide, based on ui.value.

  • change

    This event is triggered on slide stop, or if the value is changed programmatically (by the value method). Takes arguments event and ui. Use event.orginalEvent to detect whether the value changed by mouse, keyboard, or programmatically. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(this).slider('values', index) to get another handle's value.

  • stop

    This event is triggered when the user stops sliding.

  • destroy

    • .slider( "destroy" )

      version added: 1.0

    Remove the slider functionality completely. This will return the element back to its pre-init state.

  • disable

    • .slider( "disable" )

      version added: 1.0

    Disable the slider.

  • enable

    • .slider( "enable" )

      version added: 1.0

    Enable the slider.

  • option

    • .slider( "option" , optionName , [value] )

      version added: 1.0

    Get or set any slider option. If no value is specified, will act as a getter.

  • option

    • .slider( "option" , options )

      version added: 1.0

    Set multiple slider options at once by providing an options object.

  • widget

    • .slider( "widget" )

      version added: 1.0

    Returns the .ui-slider element.

  • value

    • .slider( "value" , [value] )

      version added: 1.0

    Gets or sets the value of the slider. For single handle sliders.

  • values

    • .slider( "values" , index , [value] )

      version added: 1.0

    Gets or sets the values of the slider. For multiple handle or range sliders.