Flux

Appearance

Slider ​

Sliders are a type of user interface component that allows users to select a single value from a specific range. They are widely used in various digital applications such as mobile apps, web applications, and desktop software. The main advantage of using a slider component is its ability to allow users to easily and quickly choose a desired value within a predefined range, without the need for any manual input.

0
25
50
75
100

Props

model-value: number
The value of the slider.

disabled?: boolean
If the 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 slider.

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

step?: number
The step size of the slider.
Default: 1

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

Emits

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

Examples ​

Basic

A basic slider from 0 to 100.

<template>
    <FluxFormSlider v-model="value"/>
</template>

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

    const value = ref(25);
</script>

Ticks

A slider where the ticks are visible.

0
25
50
75
100

<template>
    <FluxFormSlider
        is-ticks-visible
        v-model="value"/>
</template>

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

    const value = ref(25);
</script>

Custom formatter

A slider with a custom formatter.

0
25
50
75
100

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

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

    const value = ref(25);

    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>