Home

# Class goog.ui.SliderBase

This creates a SliderBase object.

extends goog.ui.Component

Instance Method Summary
| `addRangeHighlightAnimations_(?Element thumb, ?goog.math.Coordinate newCoord, ?goog.fx.AnimationParallelQueue animations)` Adds animations for the range highlight element to the animation queue.
| `animatedSetValue(number v)` Sets the value and starts animating the handle towards that position.
| `calculateRangeHighlightPositioning_(number firstThumbPos, number secondThumbPos, number thumbSize) ⇒ {offset: number, size: number}` Calculates the start position (offset) and size of the range highlight, e.g. for a horizontal slider, this will return [left, width] for the highlight.
| `createDom()` Creates the initial DOM representation for the component. The default implementation is to set this.element_ = div.
| `createThumbs()` Subclasses must implement this method and set the valueThumb and extentThumb to non-null values. They can also set the rangeHighlight element if a range highlight is desired.
| `decorateInternal(?Element element)` Actually decorates the element. Should be overridden by inheriting objects. This method can assume there are checks to ensure the component has not already been rendered have occurred and that enter document will be called afterwards. This method is considered protected.
| `disposeInternal()` Disposes of the component. Calls {@code exitDocument}, which is expected to remove event handlers and clean up the component. Propagates the call to the component's children, if any. Removes the component's DOM from the document unless it was decorated.
| `enableEventHandlers_(boolean enable)` Attaches/Detaches the event handlers on the slider.
| `enableMouseWheelHandling_(boolean enable)` Enable/Disable mouse wheel handling.
| `endAnimation_(?goog.fx.AnimationEvent e)` Sets the isAnimating_ field to false once the animation is done.
| `enterDocument()` Called when the DOM for the component is for sure in the document. Subclasses should override this method to set this element's role.
| `exitDocument()` Called by dispose to clean up the elements and listeners created by a component, or by a parent component/application who has removed the component from the document but wants to reuse it later. If the component contains child components, this call is propagated to its children. It should be possible for the component to be rendered again once this method has been called.
| `getBlockIncrement() ⇒ number`
| `getClosestThumb_(number position) ⇒ ?HTMLDivElement`
| `getCssClass(?goog.ui.SliderBase.Orientation orient) ⇒ string` Returns the CSS class applied to the slider element for the given orientation. Subclasses must override this method.
| `getExtent() ⇒ number`
| `getExtentThumb() ⇒ ?HTMLDivElement`
| `getMaximum() ⇒ number`
| `getMinimum() ⇒ number`
| `getMoveToPointEnabled() ⇒ boolean`
| `getOrientation() ⇒ ?goog.ui.SliderBase.Orientation`
| `getRelativeMousePos_(?goog.events.Event e) ⇒ number` Returns the relative mouse position to the slider.
| `getStep() ⇒ ?number`
| `getThumbCoordinateForValue_(number val) ⇒ ?goog.math.Coordinate` Returns the position to move the handle to for a given value
| `getThumbPosition_(?HTMLDivElement thumb) ⇒ number`
| `getUnitIncrement() ⇒ number`
| `getValue() ⇒ number`
| `getValueFromMousePosition_(?goog.events.Event e) ⇒ number` Returns the value to use for the current mouse position
| `getValueThumb() ⇒ ?HTMLDivElement`
| `handleBeforeDrag_(?goog.fx.DragEvent e)` Handler for the before drag event. We use the event properties to determine the new value.
| `handleKeyDown_(?goog.events.KeyEvent e)` Event handler for the key down event. This is used to update the value based on the key pressed.
| `handleMouseDown_(?goog.events.Event e)` Handler for the mouse down event.
| `handleMouseWheel_(?goog.events.MouseWheelEvent e)` Handler for the mouse wheel event.
| `handleRangeModelChange(?goog.events.Event e)` Call back when the internal range model changes. Sub-classes may override and re-enter this method to update a11y state. Consider protected.
| `handleThumbDragStartEnd_(?goog.fx.DragEvent e)` Handler for the start/end drag event on the thumgs. Adds/removes the "-dragging" CSS classes on the slider and thumb.
| `handleTimerTick_()` Handler for the tick event dispatched by the timer used to update the value in a block increment. This is also called directly from startBlockIncrementing_.
| `isEnabled() ⇒ boolean`
| `isHandleMouseWheel() ⇒ boolean`
| `moveThumbs(number delta)` Moves the thumbs by the specified delta as follows - as long as both thumbs stay within [min,max], both thumbs are moved - once a thumb reaches or exceeds min (or max, respectively), it stays - at min (or max, respectively). In case both thumbs have reached min (or max), no change event will fire.
| `setAriaRoles()` Set a11y roles and state.
| `setBlockIncrement(number value)` Sets the amount to increment/decrement for page up/down as well as when holding down the mouse button on the background.
| `setEnabled(boolean enable)` Enables or disables the slider. A disabled slider will ignore all user-initiated events. Also fires goog.ui.Component.EventType.ENABLE/DISABLE event as appropriate.
| `setExtent(number extent)` Sets the extent of the underlying range model. We enforce that getMinExtent() <= extent <= getMaximum() - getValue() If this is not satisifed for the given extent, the call is ignored and no CHANGE event fires.
| `setHandleMouseWheel(boolean enable)` Enables or disables mouse wheel handling for the slider. The mouse wheel handler enables the user to change the value of slider using a mouse wheel.
| `setMaximum(number max)` Sets the maximum number.
| `setMinExtent(number value)` Sets the minimal value that the extent may have.
| `setMinimum(number min)` Sets the minimum number.
| `setMoveToPointEnabled(boolean val)` Sets whether clicking on the background should move directly to that point.
| `setOrientation(?goog.ui.SliderBase.Orientation orient)` Changes the orientation.
| `setStep(?number step)` Sets the step value. The step value is used to determine how to round the value.

`setThumbPosition_(?Element thumb, number position)`

Sets the position of the given thumb. The set is ignored and no CHANGE event fires if it violates the constraint minimum <= value (valueThumb position) <= value + extent (extentThumb position) <= maximum. Note: To keep things simple, the setThumbPosition_ function does not have the side-effect of "correcting" value or extent to fit the above constraint as it is the case in the underlying range model. Instead, we simply ignore the call. Callers must make these adjustements explicitly if they wish.

| `setUnitIncrement(number value)` Sets the amount to increment/decrement for up, down, left and right arrow keys.
| `setValue(number value)` Sets the value of the underlying range model. We enforce that getMinimum() <= value <= getMaximum() - getExtent() If this is not satisifed for the given value, the call is ignored and no CHANGE event fires.

`setValueAndExtent(number value, number extent)`

Sets the value and extent of the underlying range model. We enforce that getMinimum() <= value <= getMaximum() - extent and getMinExtent <= extent <= getMaximum() - getValue() If this is not satisifed for the given extent, the call is ignored and no CHANGE event fires. This is a utility method to allow setting the thumbs simultaneously and ensuring that only one event fires.

| `setVisible(boolean visible)` Change the visibility of the slider. You must call this if you had set the slider's value when it was invisible.
| `startBlockIncrementing_(?goog.events.Event e)` Starts the animation that causes the thumb to increment/decrement by the block increment when the user presses down on the background.
| `stopBlockIncrementing_()` Stops the block incrementing animation and unlistens the necessary event handlers.
| `storeMousePos_(?goog.events.Event e)` Stores the current mouse position so that it can be used in the timer.
| `updateAriaStates()` Set a11y roles and state when values change.
| `updateUi_()` This is called when we need to update the size of the thumb. This happens when first created as well as when the value and the orientation changes.