Fader
The fader is a compact, inline slider that shows its label on the left and the current value on the right, right inside the track. The whole row acts as the track: a fill grows from the left up to the value, with a thin thumb marking the position. Set min, max and step to define the range, and provide a formatter to control how the value is displayed.
TIP
Clicking anywhere on the fader jumps to that position, and dragging keeps tracking the pointer even when it leaves the fader. The value can also be changed with the arrow keys, Page Up / Page Down for larger steps, and Home / End to jump to the minimum or maximum. Faders with a small number of steps snap to detents and show their marks automatically.
Props
model-value: number
The value of the fader.
disabled?: boolean
If the fader is disabled.
error?: string | null
Error message describing why the fader is invalid. Sets aria-invalid.
is-loading?: boolean
Marks the fader as loading.
is-readonly?: boolean
If the 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 fader.
aria-label?: string
An accessible label for the fader, used when no label is set. Announced by assistive technology.
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 faders.
is-value-hidden?: boolean
Hides the value shown on the right inside the fader.
direction?: FluxDirection
The direction of the fader. A vertical 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 fader.
max?: number
The maximum value of the fader.
Default: 100
step?: number
The step size of the fader.
Default: 1
formatter?: (value: number, decimals?: number): string
The formatter for the displayed value.
Default: formatNumber
Emits
update:model-value: [number]
Triggered when the value is changed.
Examples
Basic
A basic fader from 0 to 100.
<template>
<FluxFormFader
label="Volume"
v-model="value"/>
</template>
<script
setup
lang="ts">
import { FluxFormFader } from '@flux-ui/components';
import { ref } from 'vue';
const value = ref(25);
</script>Vertical
A vertical fader: a slim column with rotated text, 210px tall by default and resizable with CSS.
<template>
<FluxFormFader
direction="vertical"
label="Volume"
v-model="value"/>
</template>
<script
setup
lang="ts">
import { FluxFormFader } from '@flux-ui/components';
import { ref } from 'vue';
const value = ref(25);
</script>Vertical with icons
Vertical faders with a leading icon on top and a trailing icon at the bottom.
<template>
<FluxPane style="max-width: 390px">
<FluxPaneBody style="display: flex; gap: 21px">
<FluxFormFader
direction="vertical"
icon-leading="sun"
icon-trailing="moon"
label="Light"
v-model="light"/>
<FluxFormFader
direction="vertical"
icon-leading="gauge-high"
icon-trailing="sliders-simple"
label="Gain"
v-model="gain"
:formatter="percentage"/>
</FluxPaneBody>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxFormFader, FluxPane, FluxPaneBody } from '@flux-ui/components';
import { ref } from 'vue';
const light = ref(70);
const gain = ref(45);
function percentage(value: number): string {
return `${value}%`;
}
</script>Steps
A stepped fader that snaps to detents and shows their marks automatically.
<template>
<FluxFormFader
label="Resonance"
v-model="value"
:min="0"
:max="10"/>
</template>
<script
setup
lang="ts">
import { FluxFormFader } from '@flux-ui/components';
import { ref } from 'vue';
const value = ref(4);
</script>Colors
A fader per color; the color only tints the value, the track stays neutral.
<template>
<FluxPane style="max-width: 390px">
<FluxPaneBody style="display: flex; flex-direction: column; gap: 9px">
<FluxFormFader
label="Primary"
v-model="a"/>
<FluxFormFader
color="danger"
label="Danger"
v-model="b"/>
<FluxFormFader
color="success"
label="Success"
v-model="c"/>
<FluxFormFader
color="warning"
label="Warning"
v-model="d"/>
</FluxPaneBody>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxFormFader, FluxPane, FluxPaneBody } from '@flux-ui/components';
import { ref } from 'vue';
const a = ref(70);
const b = ref(85);
const c = ref(60);
const d = ref(45);
</script>Icons
A fader with a leading icon before the label and a trailing icon after the value.
<template>
<FluxPane style="max-width: 390px">
<FluxPaneBody style="display: flex; flex-direction: column; gap: 9px">
<FluxFormFader
icon-leading="gauge-high"
label="Frequency"
v-model="frequency"
:formatter="percentage"/>
<FluxFormFader
icon-leading="bolt"
icon-trailing="sliders-simple"
label="Resonance"
v-model="resonance"
:min="0"
:max="10"/>
</FluxPaneBody>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxFormFader, FluxPane, FluxPaneBody } from '@flux-ui/components';
import { ref } from 'vue';
const frequency = ref(60);
const resonance = ref(4);
function percentage(value: number): string {
return `${value}%`;
}
</script>Custom formatter
A fader with a custom formatter.
<template>
<FluxFormFader
label="Frequency"
v-model="value"
:formatter="percentage"/>
</template>
<script
setup
lang="ts">
import { FluxFormFader } from '@flux-ui/components';
import { ref } from 'vue';
const value = ref(41);
function percentage(value: number): string {
return `${value}%`;
}
</script>