Range slider

The range slider lets users select a range of values between a lower and an upper bound. It works like the Slider, but with two thumbs, one for each end of the range.

0

25

50

75

100

TIP

Clicking anywhere on the track moves the thumb closest to the pointer, so the range can be adjusted without grabbing a handle first. Use min-distance to keep a minimum gap between the two thumbs.

Props

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

disabled?: boolean
If the range slider is disabled.

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

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

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

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

is-ticks-visible?: boolean
If the ticks are visible.

is-tooltip-disabled?: boolean
If the tooltip is disabled.

direction?: FluxDirection
The direction of the range slider. A vertical range slider defaults to 210px tall, overridable with CSS.
Default: horizontal

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

max?: number
The maximum value of the range slider.
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 slider.
Default: 1

formatter?: (value: number, decimals?: number): string
The formatters of the range slider.
Default: formatNumber

Emits

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

Examples

Basic

A basic range slider from 0 to 100.

Preview

Code

<template>
    <FluxFormRangeSlider
        v-model="ranges"/>
</template>

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

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

Vertical

A vertical range slider. It defaults to 210px tall and can be resized with CSS.

Preview

Code

<template>
    <FluxFormRangeSlider
        direction="vertical"
        v-model="ranges"/>
</template>

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

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

Minimum distance

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

Preview

Code

<template>
    <FluxFormRangeSlider
        :min-distance="20"
        v-model="ranges"/>
</template>

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

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

Ticks

A range slider where the ticks are visible.

Preview

0

25

50

75

100

Code

<template>
    <FluxFormRangeSlider
        is-ticks-visible
        v-model="ranges"/>
</template>

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

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

Custom formatter

A range slider with a custom formatter.

Preview

0

25

50

75

100

Code

<template>
    <FluxFormRangeSlider
        is-ticks-visible
        v-model="ranges"
        :min="0"
        :max="100"
        :step="0.5"
        :formatter="customFormatter"/>
</template>

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

    const ranges = ref<[number, number]>([25, 75]);

    function customFormatter(value: number): string {
        const formatter = new Intl.NumberFormat(navigator.language, {
            currency: 'EUR',
            maximumFractionDigits: 2,
            minimumFractionDigits: 2,
            style: 'currency'
        });

        return formatter.format(value);
    }
</script>