Flux

Filter range ​

The range filter constrains a data set to a numeric range with a pair of sliders, one for the lower bound and one for the upper. It writes the selected range to the filter state automatically.

WARNING

This component can only be used within a Filter.

Props

icon?: FluxIconName
The icon of the filter.

is-ticks-visible?: boolean
Indicates if the slider ticks should be visible.

label: string
The label of the filter.

name: string
The name of the filter within the filter state.

max: number
The maximum value.

min: number
The minimum value.

step?: number
The step value.
Default: 1

formatter?: (value: number) => string
A formatter that is used to format the slider values into something more human readable.

Snippet ​

vue
<template>
    <FluxPane style="width: max-content">
        <FluxFilter v-model="filterState">
            <FluxFilterRange
                icon="clone"
                label="Range"
                name="option"
                :max="1000"
                :min="100"
                :step="10"/>
        </FluxFilter>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxFilter, FluxFilterRange, FluxPane } from '@flux-ui/components';
    import type { FluxFilterState } from '@flux-ui/types';
    import { ref } from 'vue';

    const filterState = ref<FluxFilterState>({
        option: [500, 750]
    });
</script>

Used components ​