Class: FilterOptionRangeSlider

FilterOptionRangeSlider()

Filter option with displayType = 'range' We use noUiSlider library: https://refreshless.com/nouislider/

Constructor

new FilterOptionRangeSlider()

Source:

Extends

Members

children :Array

Array of child components
Type:
  • Array
Inherited From:
Default Value:
  • []
Source:

filterItems :Map.<String, FilterOptionItem>

A Map of filter option items id: filter item key value: FilterOptionItem instance
Type:
Inherited From:
Source:

parent :Component

The parent component
Type:
  • Component
Inherited From:
Default Value:
  • null
Source:

Methods

_callAllBindEvents()

Bind events on the component (include all child-components)
Inherited From:
Source:

_callAllInit()

Initialize the component (include all child-components)
Inherited From:
Source:

_callAllRender()

Render the component (include all child-components)
Inherited From:
Source:

addComponent(childComponent)

Add the child component into a component
Parameters:
Name Type Description
childComponent Object The child component
Inherited From:
Source:

afterBindEvents()

After bind evnets on the component
Inherited From:
Source:

afterInit()

After initialize callback
Inherited From:
Source:

afterRender()

After reder component callback
Inherited From:
Source:

beforeBindEvents()

Before bind events on component callback
Inherited From:
Source:

beforeInit()

Before initialize callback
Inherited From:
Source:

beforeRender()

Before reder component callback
Inherited From:
Source:

bindEvents()

Bind events on the component
Overrides:
Source:

buildLabel(value) → {string}

Build the range slider labels (under each pips - divider)
Parameters:
Name Type Description
value string | Number original value
Source:
Returns:
formatted value
Type
string

buildMoneyLabel(value) → {string}

Build the money label. Use in price range slider. By default it uses the shop's money format. Calls buildNumberLabel() and then replace the {{amount}} with number label.
Parameters:
Name Type Description
value Number The price value
Source:
Returns:
- Formatted value
Type
string

buildNumberLabel(value, isShortenNumber) → {string}

Build number label: separate thousands, decimal, fixed decimal places.
Parameters:
Name Type Description
value Number
isShortenNumber boolean
Source:
Returns:
Formatted value
Type
string

buildTextLabel(value) → {string}

Build the text label. Use in advance range slider. By default this function trims the text prefix.
Parameters:
Name Type Description
value string
Source:
Returns:
Formatted value
Type
string

getBlockContentTemplate() → {string}

Get the content html template for DisplayType.RANGE Depending on 'this.hideInputElement' it returns different templates with and without the input field
Overrides:
Source:
Returns:
Raw html template
Type
string

getNumberAppliedFilterItems() → {Number}

Get the number of applied filter items in this filter option.
Inherited From:
Source:
Returns:
number of applied filter items
Type
Number

getSliderConfig() → {Object}

Get the noUiSlider config object noUiSlider config documentation: https://refreshless.com/nouislider/slider-options/
Source:
Returns:
- The noUiSlider config object
Type
Object

getSliderPipsConfig() → {Object}

Get the noUiSlider pips configs Pips are dividers in the range. noUiSlider pips documentation: https://refreshless.com/nouislider/pips/
Source:
Returns:
- The noUiSlider pips config object
Type
Object

getSliderRange() → {Object}

Get the noUiSlider range object noUiSlider range documentation: https://refreshless.com/nouislider/slider-values/
Source:
Returns:
- The noUiSlider range object
Type
Object

getTemplate() → {string}

Get the filter option template. Depending on its filterTreeType, it returns different templates for 'vertical' and 'horizontal'
Inherited From:
Source:
Returns:
Raw html template for a single filter option
Type
string

init()

Initialize component
Overrides:
Source:

isBindEvents()

Returns whether or not binding the events on a component
Inherited From:
Source:

isLoopThroughChild()

Returns whether or not the childs of a component is refresh
Inherited From:
Source:

isRender()

Returns whether or not the component is rendered
Overrides:
Source:

isSortValues() → {boolean}

Check if we need to sort filter option values
Inherited From:
Source:
Returns:
- Whether we need to sort values or not.
Type
boolean

markValuesAsNoRender(values)

Mark values in the array as no render. If we have more than scrollFirstLoadLength filter values, and showMoreType=='scrollbar', don't render all values at once, but append them on scroll.
Parameters:
Name Type Description
values Array The data.values array.
Inherited From:
Source:

modifyValues(values)

Modify the value list. For example: add collection All to the list. It modifies the values array in-place.
Parameters:
Name Type Description
values Array The data.values array.
Inherited From:
Source:

naturalSortFunction(a, b) → {number}

Function to sort naturally (mixed number and text) Sort number from small to big, and then sort text alphabetically. For text mixed with number, if the text starts with a number, sort the number part first. Ex: 0, 1, 1b, 2, 2a, 2b, ab, ba
Parameters:
Name Type Description
a
b
Inherited From:
Source:
Returns:
Type
number

onChangeInput()

On changing the input field Only works for number
Source:

onDrag()

On dragging the slider, update the input field. This is called on noUiSlider's 'slide' event: https://refreshless.com/nouislider/events-callbacks/
Source:

onFinishDragging()

On finish dragging the slider: update the current value, and perform API request (if this.requestInstantly = true). This is called on noUiSlider's 'change' event: https://refreshless.com/nouislider/events-callbacks/
Source:

prepareFilterOptionData()

Prepare filter option data
Source:

refresh()

Refresh component
Inherited From:
Source:

removeComponent(childComponent)

Remove a child component of a component
Parameters:
Name Type Description
childComponent Object The child component
Inherited From:
Source:

render()

Render compoment
Overrides:
Source:

renderInputField()

Render the input field. This won't be called if hideInputElement=true
Source:

renderRangeValue()

Render the range slider using noUiSlider library
Source:

setCurrentValues()

Set the current values of the range slider. Called by setData function
Source:

setData(data)

Set data for FilterOptionRangeSlider. Override default setData by FilterOption. It calls super.setData(), and then set some extra data exclusive to range slider.
Parameters:
Name Type Description
data
Overrides:
Source:

setMoneyFormat()

Get the money format used in building price label. Set this.moneyFormat (for label) and this.moneyFormatWithoutCurrency (for input box). It takes Globals.moneyFormat value and merge with delimiter settings.
Source:

sortValues(values)

Sort the values. This is called if isSortValues() returns true. It modifies the values array in-place.
Parameters:
Name Type Description
values Array The data.values array.
Inherited From:
Source: