Label(description)

Helper text

Usage

<script setup lang="ts">
import { Slider } from "wedges-vue";
</script>

<template>
  <Slider
    :default-value="[33]" :max="100" :step="1"
  />
</template>

API Reference

Props

Prop	Type	Default
after	string
as	AsTag | Component	'div'
before	string
defaultValue	number[]
description	string
dir	'ltr' | 'rtl'
disabled	boolean	false
helperText	string
id	string
inverted	boolean	false
label	string
max	number
min	number
minStepsBetweenThumbs	number
modelValue	number[]
name	string
orientation	'horizontal' | 'vertical'
renderTooltip	((value: number) => string)
required	boolean	false
showTooltip	'always' | 'hover' | 'never'
step	number
tooltip	string

Emit	Description
update:modelValue
valueCommit

Examples

Use orientation prop to create vertical sliders.

You can disable the slider by using the disabled prop.

Label(description)

0

100

Helper text

Use range values:

Price Range

$1,000

$10,000

Selected range: $2,500 - $5,000

Controlled component:

Font Size

Font size: 16px

Playground:

Rating(1-10)

1

10

How happy are you with the level of service?

Brightness

DimDim

Price Range

$1,000

$10,000

10