Clear Up
SharpKit Reference

Multi Class

Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking and animation. Can be added as an item to any container.

Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:

    Ext.create('Ext.slider.Multi', {
            width: 200,
            values: [25, 50, 75],
            increment: 5,
            minValue: 0,
            maxValue: 100,
            // this defaults to true, setting to false allows the thumbs to pass each other
            constrainThumbs: false,
            renderTo: Ext.getBody()

Namespace: Ext.slider

Derived Types



Name Description
addThumb(object) Creates a new thumb and adds it to the slider
getValue(JsNumber) Returns the current value of the slider
getValues() Returns an array of values - one for the location of each thumb
setMaxValue(JsNumber) Sets the maximum value for the slider instance. If the current value is more than the maximum value, the current value will be changed.
setMinValue(JsNumber) Sets the minimum value for the slider instance. If the current value is less than the minimum value, the current value will be changed.
setValue(JsNumber, JsNumber, object) Programmatically sets the value of the Slider. Ensures that the value is constrained within the minValue and maxValue.
syncThumbs() Synchronizes thumbs position to the proper proportion of the total component width based on the current slider value. This will be called automatically when the Slider is resized by a layout, but if it is rendered auto width, this method can be called from another resize handler to sync the Slider if necessary.


Name Description
clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to: true
constrainThumbs True to disallow thumbs from overlapping one another. Defaults to: true
decimalPrecision The number of decimal places to which to round the Slider's value. To disable rounding, configure as false. Defaults to: 0
increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'. Defaults to: 0
keyIncrement How many units to change the Slider when adjusting with keyboard navigation. If the increment config is larger, it will be used instead. Defaults to: 1
maxValue The maximum value for the Slider. Defaults to: 100
minValue The minimum value for the Slider. Defaults to: 0
tipText A function used to display custom text for the slider tip. Defaults to null, which will use the default on the plugin.
useTips True to use an Ext.slider.Tip to display tips for the value. This option may also provide a configuration object for an Ext.slider.Tip. Defaults to: true
values Array of Number values with which to initalize the slider. A separate slider thumb will be created for each value in this array. This will take precedence over the single value config.
vertical Orient the Slider vertically rather than horizontally. Defaults to: false
zeroBasedSnapping Set to true to calculate snap points based on increments from zero as opposed to from this Slider's minValue. By Default, valid snap points are calculated starting increments from the minValue Defaults to: false


Name Description
dragging True while the thumb is in a drag operation Defaults to: false
thumbs Array containing references to each thumb Defaults to: []
© Copyright 2005-2011 SharpKit. All rights reserved.