Slider

Picks an approximate value in a small range by dragging, such as a discount or a maximum price.

<script setup lang="ts">
import { FsSlider } from '@fivespark/ui'
import { ref } from 'vue'

const korting = ref(10)
</script>

<template>
  <FsSlider v-model="korting" label="Korting (%)" :max="30" :step="5" class="w-full max-w-md" />
</template>

Usage

<script setup lang="ts">
import { FsSlider } from '@fivespark/ui'
import { ref } from 'vue'

const korting = ref(10)
</script>

<template>
  <FsSlider v-model="korting" label="Korting (%)" :max="30" />
</template>

When the exact number matters, use Number input. A slider always has a value within its range, so it takes no invalid or required.

Examples

Formatted value

formatOptions writes the value, and the limits, as currency, a percentage or a plain number, in the app's language. A percentage is given in points: 25 is "25%".

<script setup lang="ts">
import { FsSlider } from '@fivespark/ui'
import { ref } from 'vue'

const prijs = ref(2000)
</script>

<template>
  <FsSlider
    v-model="prijs"
    label="Maximale prijs"
    :max="5000"
    :step="100"
    :format-options="{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }"
    class="w-full max-w-md"
  />
</template>

Showing the limits

showLimits writes the lowest and the highest value under the ends of the track.

<script setup lang="ts">
import { FsSlider } from '@fivespark/ui'
import { ref } from 'vue'

const prijs = ref(2000)
</script>

<template>
  <FsSlider
    v-model="prijs"
    label="Maximale prijs"
    :max="5000"
    :step="100"
    :format-options="{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }"
    show-limits
    class="w-full max-w-md"
  />
</template>

Custom value text

Where a format cannot say it, valueText writes the value instead, both shown and read aloud.

<script setup lang="ts">
import { FsSlider } from '@fivespark/ui'
import { ref } from 'vue'

const dagen = ref(14)
</script>

<template>
  <FsSlider
    v-model="dagen"
    label="Betaaltermijn"
    :min="7"
    :max="60"
    :value-text="(value) => `${value} dagen`"
    show-limits
    class="w-full max-w-md"
  />
</template>

Disabled and read-only

A disabled slider cannot be focused or submitted. A read-only slider keeps its value fixed but stays focusable and submitted.

<script setup lang="ts">
import { FsSlider } from '@fivespark/ui'
import { ref } from 'vue'

const korting = ref(10)
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-6">
    <FsSlider v-model="korting" label="Korting (%)" :max="30" disabled />
    <FsSlider v-model="korting" label="Korting (%), vastgesteld in het contract" :max="30" readonly />
  </div>
</template>

Without a visible label

Name a slider that has no label with aria-label or aria-labelledby. The value then stands beside the track.

<script setup lang="ts">
import { FsSlider } from '@fivespark/ui'
import { ref } from 'vue'

const korting = ref(10)
</script>

<template>
  <FsSlider v-model="korting" aria-label="Korting in procenten" :max="30" class="w-full max-w-md" />
</template>

Keyboard

Key	Does
←, ↓	Lowers the value by one step
→, ↑	Raises the value by one step
Page Down, Page Up	Moves the value by a tenth of the range
Home, End	Goes to the lowest or the highest value

API Reference

FsSlider

Prop	Type	Default	Description
label	string		The visible name, with its unit when the value shows none. Without one, name it with `aria-labelledby` or `aria-label`.
min	number	0	The lowest value.
max	number	100	Below `min`, it is `min`.
step	number	1	Divides the range: 0 to 100 by 10, not by 30.
formatOptions	Intl.NumberFormatOptions		How the value, the limits and the value read out are written, in the component's language: `{ style: 'currency', currency: 'EUR' }`. A percentage is in points: 25 is "25%"; with a step below 1, give it `maximumFractionDigits`.
valueText	((value: number) => string)		Replaces the formatted value, shown and read, where a format cannot say it: "3 dagen". The limits too.
showLimits	boolean	false	Shows the limits under the ends.
id	string		Without a field. In a field, the slider takes the field's.
disabled	boolean		Unavailable for now. In a field, the slider takes the field's.
readonly	boolean		Focusable and submitted, its value fixed. Say why in the field's description.
readonlyText	string		Replaces the hidden "alleen lezen" or "read-only".
modelValue	number		The value. A value off the range or between steps is shown where the browser puts it.

Event	Payload	Description
update:modelValue	[value: number | undefined]	Sent with the new `modelValue`, for `v-model`.