Flux

Appearance

Filter range ​

This component provides an option select functionality, allowing users to select multiple options from a set of predefined options. It handles state updates 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],

        get resettable(): string[] {
            return [];
        },

        reset(): void {
        }
    });
</script>

Used components ​