Slider

One numeric thumb. Arrow keys change by step; Home and End reach the bounds. The commit event marks completion.

Preview

Open in the playground

Usage

SliderExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzSlider } from '@chrisdalbano/forza-ui'
const budget = ref<number>(3200)
</script>

<template>
  <FzSlider
    v-model="budget"
    label="Gold"
    :min="1000"
    :max="6000"
    :step="100"
  />
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
label	string	Yes	None
min	number | undefined	No	0
max	number | undefined	No	100
step	number | undefined	No	1
disabled	boolean | undefined	No	None
unit	string | undefined	No	""
name	string | undefined	No	None
modelValue	number	Yes	None

Events and state

v-model: number; commit(value)

• update:modelValue: [value: number]
• commit: [value: number]

Slots

none

Add from source

forza add slider

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.