NumberRangeFilter

Renders a number range filter, emitting the needed events when clicked.

Props

Name	Description	Type	Default
filter	The filter data to render.	NumberRangeFilterModel
clickEvents	Additional events, with their payload, to emit when the filter is clicked.	Partial
cssClasses	Inheritance CSS classes.	(string | Dictionary)[]	() => []

Slots

Name	Description	Bindings (name - type - description)
default	The control element to render	filter Filter - The filter data clickFilter () => void - Method that will invoke the needed actions after the user cssClasses Object - Object containing CSS classes to add to the button isDisabled Boolean - True if the filter shouldn't be able to be selected by the
label	The content to render inside the button	filter Filter - The filter data

Events

This component emits the following events:

• UserClickedAFilter (opens new window): the event is emitted after the user clicks the button, using the filter prop as its payload.
• UserClickedANumberRangeFilter (opens new window): the event is emitted after the user clicks the button, using the filter prop as its payload.

Examples

This component renders a button which, on clicked, emits the UserClickedAFilter and the UserClickedANumberRangeFilter events. By default, it renders the filter label as the button text.

The filter prop is required. The clickEvents prop is optional and allows configuring the events to emit on click.

<template>
  <NumberRangeFilter :filter="filter" />
</template>
<script setup>
import { NumberRangeFilter } from '@empathyco/x-components/facets'
import { ref } from 'vue'
const filter = ref({
  id: `price:1-10`,
  modelName: 'NumberRangeFilter',
  label: `From 1 to 10`,
  facetId: 'price',
  range: {
    min: 1,
    max: 10,
  },
  selected: false,
})
</script>

Playing with props

Configuring the events to emit when the filter is clicked.

<template>
  <NumberRangeFilter :clickEvents="{ UserClickedANumberRangeFilter: filter }" :filter="filter" />
</template>
<script setup>
import { NumberRangeFilter } from '@empathyco/x-components/facets'
import { ref } from 'vue'
const filter = ref({
  id: `price:1-10`,
  modelName: 'NumberRangeFilter',
  label: `From 1 to 10`,
  facetId: 'price',
  range: {
    min: 1,
    max: 10,
  },
  selected: false,
})
</script>

Customizing its contents

<template>
  <NumberRangeFilter :filter="filter" v-slot="{ filter }">
    <img src="checkbox.png" />
    <span>{{ filter.label }}</span>
  </NumberRangeFilter>
</template>
<script setup>
import { NumberRangeFilter } from '@empathyco/x-components/facets'
import { ref } from 'vue'
const filter = ref({
  id: `price:1-10`,
  modelName: 'NumberRangeFilter',
  label: `From 1 to 10`,
  facetId: 'price',
  range: {
    min: 1,
    max: 10,
  },
  selected: false,
})
</script>