• API reference
  • UI components

Slider component

On this page

This component is used in usf.templates.filter template. In your Customization Javascript, you may find it in _usfFilterBodyTemplate. It represents the sliders used for Price, Weight, and numeric product/variant Metafields.

Properties

Name Data type Description
prefix String The prefix string that is prepended to the slider pip numbers.
suffix String The suffix string that is appended to the slider pip numbers.
noAbbreviation String true to disable showing 'k', 'M' like 1k (1000), 1M (1000000) in the pip numbers.
value Array The start and end value.
min Number The min value.
max Number The max value.
pips Number The number of pips.
steps Number The number of slider steps.
decimals Number The digits after the decimal point.

Examples

Show how to add currency to the slider numbers

<usf-slider suffix=" USD" 
    :min="facet.min" 
    :max="facet.max" 
    :pips="facet.range[0]" 
    :step="facet.range[1]" 
    :decimals="rangeDecimals" 
    :value="range" 
    :converter="rangeConverter" 
    @input="onRangeSliderInput" @change="onRangeSliderChange">
</usf-slider>

Show how to change 1k to 1n

<usf-slider 
    :symbols="['','n','M','G']" 
    :min="facet.min" 
    :max="facet.max" 
    :pips="facet.range[0]" 
    :step="facet.range[1]" 
    :decimals="rangeDecimals" 
    :value="range" 
    :converter="rangeConverter" 
    @input="onRangeSliderInput" @change="onRangeSliderChange">
</usf-slider>
Previous
InstantSearchItem component
Next
PreviewModal component

14 Days Risk Free Trial. No credit card required. Cancel anytime.

© Sobooster - Privacy Policy