Range fader

The range fader lets users select a range of values between a lower and an upper bound. It works like the Fader, but with two thumbs, one for each end of the range, and shows both values on the right.

Volume25 - 75

Volume25 - 75

TIP

Clicking anywhere on the track moves the thumb closest to the pointer, so the range can be adjusted without grabbing a handle first. Tab between the two thumbs and use the arrow keys to fine-tune each bound. Use min-distance to keep a minimum gap between the two thumbs.

Props

model-value: [number, number]
The value of the range fader.

disabled?: boolean
If the range fader is disabled.

error?: string | null
Error message describing why the range fader is invalid. Sets aria-invalid.

is-loading?: boolean
Marks the range fader as loading.

is-readonly?: boolean
If the range fader is readonly. Blocks interaction.

name?: string
The name attribute of the underlying form control.

label?: string
The label shown on the left inside the range fader.

color?: FluxColor
The color of the filled value. The track always stays neutral.
Default: primary

icon-leading?: FluxIconName
An icon shown before the label.

icon-trailing?: FluxIconName
An icon shown after the value.

is-ticks-visible?: boolean
Forces the detent marks to show. They already appear automatically on stepped range faders.

is-value-hidden?: boolean
Hides the value shown on the right inside the range fader.

direction?: FluxDirection
The direction of the range fader. A vertical range fader is a slim column with rotated text and defaults to 210px tall, overridable with CSS.
Default: horizontal

min?: number
The minimum value of the range fader.

max?: number
The maximum value of the range fader.
Default: 100

min-distance?: number
The minimum distance (in value units) kept between the lower and upper thumb.

step?: number
The step size of the range fader.
Default: 1

formatter?: (value: number, decimals?: number): string
The formatter for the displayed values.
Default: formatNumber

Emits

update:model-value: [number, number]
Triggered when the value is changed.

Examples

Basic

A basic range fader from 0 to 100.

Preview

Range25 - 75

Range25 - 75

Code

<template>
    <FluxFormRangeFader
        label="Range"
        v-model="range"/>
</template>

<script
    setup
    lang="ts">
    import { FluxFormRangeFader } from '@flux-ui/components';
    import { ref } from 'vue';

    const range = ref<[number, number]>([25, 75]);
</script>

Vertical

A vertical range fader: a slim column with rotated text, 210px tall by default and resizable with CSS.

Preview

Range25 - 75

Range25 - 75

Code

<template>
    <FluxFormRangeFader
        direction="vertical"
        label="Range"
        v-model="range"/>
</template>

<script
    setup
    lang="ts">
    import { FluxFormRangeFader } from '@flux-ui/components';
    import { ref } from 'vue';

    const range = ref<[number, number]>([25, 75]);
</script>

Minimum distance

A range fader that keeps at least 20 units between both thumbs.

Preview

Range30 - 70

Range30 - 70

Code

<template>
    <FluxFormRangeFader
        :min-distance="20"
        label="Range"
        v-model="range"/>
</template>

<script
    setup
    lang="ts">
    import { FluxFormRangeFader } from '@flux-ui/components';
    import { ref } from 'vue';

    const range = ref<[number, number]>([30, 70]);
</script>

Steps

A stepped range fader that snaps to detents and shows their marks automatically.

Preview

Band2 - 8

Band2 - 8

Code

<template>
    <FluxFormRangeFader
        label="Band"
        v-model="range"
        :min="0"
        :max="10"/>
</template>

<script
    setup
    lang="ts">
    import { FluxFormRangeFader } from '@flux-ui/components';
    import { ref } from 'vue';

    const range = ref<[number, number]>([2, 8]);
</script>

Colors

A range fader per color; the color only tints the value, the track stays neutral.

Preview

Primary25 - 75

Primary25 - 75

Danger20 - 60

Danger20 - 60

Success35 - 80

Success35 - 80

Warning10 - 55

Warning10 - 55

Code

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody style="display: flex; flex-direction: column; gap: 9px">
            <FluxFormRangeFader
                label="Primary"
                v-model="a"/>

            <FluxFormRangeFader
                color="danger"
                label="Danger"
                v-model="b"/>

            <FluxFormRangeFader
                color="success"
                label="Success"
                v-model="c"/>

            <FluxFormRangeFader
                color="warning"
                label="Warning"
                v-model="d"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxFormRangeFader, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { ref } from 'vue';

    const a = ref<[number, number]>([25, 75]);
    const b = ref<[number, number]>([20, 60]);
    const c = ref<[number, number]>([35, 80]);
    const d = ref<[number, number]>([10, 55]);
</script>

Custom formatter

A range fader with a custom formatter.

Preview

Price€200 - €800

Price€200 - €800

Code

<template>
    <FluxFormRangeFader
        label="Price"
        v-model="range"
        :min="0"
        :max="1000"
        :step="50"
        :formatter="euro"/>
</template>

<script
    setup
    lang="ts">
    import { FluxFormRangeFader } from '@flux-ui/components';
    import { ref } from 'vue';

    const range = ref<[number, number]>([200, 800]);

    const formatter = new Intl.NumberFormat(navigator.language, {
        currency: 'EUR',
        maximumFractionDigits: 0,
        style: 'currency'
    });

    function euro(value: number): string {
        return formatter.format(value);
    }
</script>