Flux

Appearance

Range slider ​

A range slider is a user interface component that allows users to select two values within a predefined range. It is similar to a single-value slider, but instead of selecting a single value, a range slider allows the user to select a range of values between two endpoints. The two endpoints of the slider represent the minimum and maximum values of the range, and the user can adjust the position of each endpoint to select the desired range.

0
25
50
75
100

Props

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

disabled?: boolean
If the range slider is disabled.

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

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

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

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

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.

<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>

Ticks

A range slider where the ticks are visible.

0
25
50
75
100

<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.

0
25
50
75
100

<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>