Slider

Basic Usage

Slider

​

<script setup>
import { Slider } from '@8ctavio/vergil/components'
import { useModel } from '@8ctavio/vergil'
const progress = useModel(80)
</script>

<template>
    <Slider v-model="progress" label="Slider"/>
</template>

Attributes

The Slider component wraps an input[type="range"] element. Common range input attributes are supported:

• min: The greatest value in the range of permitted values.
• max: The lowest value in the range of permitted values.
• step: The range value granularity.

Props

Display value

display-value: boolean | ((value: number) => string)

MiniMarkup

<Slider display-value/>

​

0

TIP

The Slider's value is displayed inside a p.slider-value element which auto-adjusts its width based on the max prop's length property in order to prevent the Slider's width from changing when numbers of different lengths are displayed.

The display-value prop also accepts a callback function that receives the Slider's value, and returns a formatted string to display.

<script setup>
import { separateThousands } from '@8ctavio/vergil'

function formatValue(value) {
    return `**${separateThousands(value * 1000)}**`
}
</script>

<template>
    <Slider :display-value="formatValue" min="1" max="10"/>
</template>

<style>
.slider > .slider-outer > .slider-value {
    font-family: var(--font-mono);
    width: 60px;
}
</style>

​

1,000

TIP

When displaying formatted strings, consider setting the p.slider-value width greater than the longest displayed string's width.

Virtual range

virtual-min: number

virtual-max: number

<Slider :virtual-min="20" :virtual-max="80" display-value/>

​

20

Fixed progress

fixed-progress: boolean

<Slider fixed-progress display-value/>

​

0

Theme

theme: theme = 'brand'

​

​

​

​

​

​

​

Size

size: ('xs' | 'sm' | 'md' | 'lg' | 'xl') = 'md'

​

​

​

​

​

Radius

radius: ('none' | 'sm' | 'md' | 'lg' | 'full') = 'full'

​

​

​

​

​

NOTE

The Slider's radius prop is not affected by the descendant prop.

Spacing

spacing: ('compact' | 'expanded') = ''

Compact

​

50

Default

​

50

Expanded

​

50

Compact

​

50

Default

​

50

Expanded

​

50

Compact

​

50

Default

​

50

Expanded

​

50

Compact

​

50

Default

​

50

Expanded

​

50

Compact

​

50

Default

​

50

Expanded

​

50

Disabled

disabled: boolean

​

50

Elements

element	tag	description
input	<input[type="range"]>	Slider's underlying input element.

Anatomy

<div.form-field.slider/>

<div.form-field-label-wrapper/>

<label.form-field-label/>

<span.form-field-hint/>

<p.form-field-details.form-field-description/>

<div.slider-outer/>

<div.slider-wrapper/>

<span/>

<input[type="range"]/>

<span.slider-track/>

<span.slider-progress/>

<span.switch-knob/>

<label/>

<p.slider-value/>

<p.form-field-details.form-field-help/>

API Reference

Props

prop	type	default
value	string | number	'0'
min	string | number	'0'
max	string | number	'100'
virtualMin	number
virtualMax	number
displayValue	boolean | ((value: number) => string)
fixedProgress	boolean
disabled	boolean
label	string
hint	string
description	string
help	string
showErrros	boolean
descendant	boolean
theme	'brand' | 'user' | 'ok' | 'info' | 'warn' | 'danger' | 'neutral'	'brand'
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
radius	'none' | 'sm' | 'md' | 'lg' | 'full'	'full'
spacing	'' | 'compact' | 'extended'	''
validator	Function
eagerValidation	boolean
elements	object
validationDelay	number	300

Configuration options

Slider's configuration options allow to overwrite some Slider props' default values and may be overwritten under the slider root-level configuration option.

slider.<option>	type	default	global
validationDelay	number		✅
theme	theme		✅
size	size		✅
radius	radius	'full'
spacing	spacing		✅