Flux

Slider ​

The slider lets users pick a single value from a range by dragging a thumb. Set min, max and step to define the range, and provide a formatter to control how the value is displayed.

0
25
50
75
100

TIP

Clicking anywhere on the track jumps the thumb to that position, and dragging keeps tracking the pointer even when it leaves the slider. The thumb can also be moved with the arrow keys for keyboard users.

Props

model-value: number
The value of the slider.

disabled?: boolean
If the slider is disabled.

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

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

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

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

aria-label?: string
An accessible label for the slider, announced by assistive technology.

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

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

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

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>

Vertical

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

<template>
    <FluxFormSlider
        direction="vertical"
        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>