API Docs for: 3.8.0
Show:

SliderValueRange Class

Module: slider-value-range
Parent Module: slider

One class of value algorithm that can be built onto SliderBase. By default, values range between 0 and 100, but you can configure these on the built Slider class by setting the min and max configurations. Set the initial value (will cause the thumb to move to the appropriate location on the rail) in configuration as well if appropriate.

Methods

_afterMaxChange

(
  • e
)
protected

Update position according to new max value. If the new max results in the current value being out of range, the value is set to the closer of min or max.

Parameters:

_afterMinChange

(
  • e
)
protected

Update position according to new min value. If the new min results in the current value being out of range, the value is set to the closer of min or max.

Parameters:

_afterValueChange

(
  • e
)
protected

Propagate change to the thumb position unless the change originated from the thumbMove event.

Parameters:

_bindValueLogic

() protected

Override of stub method in SliderBase that is called at the end of its bindUI stage of render(). Subscribes to internal events to trigger UI and related state updates.

_calculateFactor

() protected

Calculates and caches (range between max and min) / (rail length) for fast runtime calculation of position -> value.

_defThumbMoveFn

(
  • e
)
protected

Dispatch the new position of the thumb into the value setting operations.

Parameters:

_initSliderValueRange

() protected

Stub for construction logic. Override if extending this class and you need to set something up during the initializer phase.

_nearestValue

(
  • value
)
Number protected

Returns the nearest valid value to the value input. If the provided value is outside the min - max range, accounting for min > max scenarios, the nearest of either min or max is returned. Otherwise, the provided value is returned.

Parameters:

  • value Mixed

    Value to test against current min - max range

Returns:

Number: Current min, max, or value if within range

_offsetToValue

(
  • offset
)
Mixed protected

Converts a pixel position into a value. Calculates current thumb offset from the leading edge of the rail multiplied by the ratio of (max - min) / (constraining dim).

Override this if you want to use a different value mapping algorithm.

Parameters:

  • offset Number

    X or Y pixel offset

Returns:

Mixed: Value corresponding to the provided pixel offset

_setNewValue

(
  • value
)
Number protected

Restricts new values assigned to value attribute to be between the configured min and max. Rounds to nearest integer value.

Parameters:

  • value Number

    Value assigned to value attribute

Returns:

Number: Normalized and constrained value

_setPosition

(
  • value
  • [options]
)
protected

Positions the thumb in accordance with the translated value.

Parameters:

  • value Number

    Value to translate to a pixel position

  • [options] Object optional

    Details object to pass to _uiMoveThumb

_syncThumbPosition

() protected

Move the thumb to appropriate position if necessary. Also resets the cached offsets and recalculates the conversion factor to translate position to value.

_validateNewMax

(
  • value
)
Boolean protected

Validates new values assigned to max attribute. Numbers are acceptable. Override this to enforce different rules.

Parameters:

  • value Mixed

    Value assigned to max attribute.

Returns:

Boolean: True for numbers. False otherwise.

_validateNewMin

(
  • value
)
Boolean protected

Validates new values assigned to min attribute. Numbers are acceptable. Override this to enforce different rules.

Parameters:

  • value Any

    Value assigned to min attribute.

Returns:

Boolean: True for numbers. False otherwise.

_valueToOffset

(
  • val
)
Number protected

Converts a value into a pixel offset for use in positioning the thumb according to the reverse of the _offsetToValue( xy ) operation.

Parameters:

  • val Number

    The value to map to pixel X or Y position

Returns:

Number: The pixel offset

_verifyValue

() protected

Verifies that the current value is within the min - max range. If not, value is set to either min or max, depending on which is closer.

getValue

() Number

Returns the current value. Override this if you want to introduce output formatting. Otherwise equivalent to slider.get( "value" );

Returns:

setValue

(
  • val
)
Slider chainable

Updates the current value. Override this if you want to introduce input value parsing or preprocessing. Otherwise equivalent to slider.set( "value", v );

Parameters:

Returns:

Properties

_factor

Number protected

Factor used to translate value -> position -> value.

ATTRS

Object protected static

Attributes that will be added onto host class.

Attributes

majorStep

Number

amount to increment/decrement the Slider value when the page up/down keys are pressed

Default: 10

Fires event majorStepChange

Fires when the value for the configuration attribute majorStep is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

max

Number

The value associated with the farthest bottom, right position of the rail. Can be less than the configured min if you want values to increase from right-to-left or bottom-to-top.

Default: 100

Fires event maxChange

Fires when the value for the configuration attribute max is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

min

Number

The value associated with the farthest top, left position of the rail. Can be greater than the configured max if you want values to increase from right-to-left or bottom-to-top.

Default: 0

Fires event minChange

Fires when the value for the configuration attribute min is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

minorStep

Number

amount to increment/decrement the Slider value when the arrow up/down/left/right keys are pressed

Default: 1

Fires event minorStepChange

Fires when the value for the configuration attribute minorStep is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

value

Number

The value associated with the thumb's current position on the rail. Defaults to the value inferred from the thumb's current position. Specifying value in the constructor will move the thumb to the position that corresponds to the supplied value.

Default: (inferred from current thumb position)

Fires event valueChange

Fires when the value for the configuration attribute value is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:

  • e EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.