Component

Vue Range Slider Component

<DomRangeInput>

A compact slider input for numeric values with a stylable track and handle.

Playground

Try every prop live

Range input playground

Adjust the props to explore sizing, content, and behaviour.

Confidence

64%

Properties

Control props

Value

Current numeric value.

Min

Minimum slider value.

Max

Maximum slider value.

Step

Slider increment.

Suffix

Optional unit shown beside the value.

Show ValueShow the current value beside the slider.

Track Class

Classes applied to the visual range track.

Control Class

Classes applied to the interactive track area, including its touch target height.

Progress Class

Classes applied to the filled range track.

Handle Class

Classes applied to the visual slider handle.

Active Handle Class

Additional classes applied to the handle while it is being dragged.

Field props

Optional ID override. By default parent forms derive the input ID from the field path using underscores.

Name

Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.

Label

Visible field label.

Description

Optional helper copy below the field.

Placeholder

Placeholder shown when the control is empty.

RequiredMark the field as required.

DisabledDisable field interaction.

Read OnlyShow the value but prevent editing.

InvalidMark the field invalid.

Errors

Validation errors for this field.

VisibleShow or hide the field.

Validators

No validators yet.

Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.

Validate On BlurRun validators when the field loses focus.

Chrome

Render default field chrome, or hide chrome while keeping form state wiring.

Playground.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomRangeInput } from '@getdom/studio';

const data = reactive({
		"modelValue": 64,
		"id": "",
		"name": "",
		"label": "Confidence",
		"description": "",
		"placeholder": "",
		"required": false,
		"disabled": false,
		"readOnly": false,
		"invalid": false,
		"errors": [],
		"visible": true,
		"validators": [],
		"validateOnBlur": true,
		"chrome": "field",
		"min": 0,
		"max": 100,
		"step": 1,
		"suffix": "%",
		"showValue": true,
		"trackClass": "",
		"controlClass": "",
		"progressClass": "",
		"handleClass": "size-5 border-2 border-canvas shadow-md group-hover:scale-110",
		"activeHandleClass": "scale-125 ring-4 ring-primary/20"
	});
</script>

<template>
	<DomRangeInput
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`modelValue`	number \| string	string	0	Current numeric value.
`min`	number	number	0	Minimum slider value.
`max`	number	number	100	Maximum slider value.
`step`	number	number	1	Slider increment.
`suffix`	string	string	''	Optional unit shown beside the value.
`showValue`	boolean	boolean	true	Show the current value beside the slider.
`trackClass`	string \| array \| object	Array<unknown>	''	Classes applied to the visual range track.
`controlClass`	string \| array \| object	Array<unknown>	''	Classes applied to the interactive track area, including its touch target height.
`progressClass`	string \| array \| object	Array<unknown>	''	Classes applied to the filled range track.
`handleClass`	string \| array \| object	Array<unknown>	''	Classes applied to the visual slider handle.
`activeHandleClass`	string \| array \| object	Array<unknown>	''	Additional classes applied to the handle while it is being dragged.

Field props

Name	Type	TS	Default	Description
`id`	string	string	''	Optional ID override. By default parent forms derive the input ID from the field path using underscores.
`name`	string	string	''	Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
`label`	string	string	''	Visible field label.
`description`	string	string	''	Optional helper copy below the field.
`placeholder`	string	string	''	Placeholder shown when the control is empty.
`required`	boolean	boolean	false	Mark the field as required.
`disabled`	boolean	boolean	false	Disable field interaction.
`readOnly`	boolean	boolean	false	Show the value but prevent editing.
`invalid`	boolean	boolean	false	Mark the field invalid.
`errors` ts `[ { name: "Validation name", message: "Error message", } ]`	array \| object \| string	Array<ErrorsItem `type ErrorsItem = { name?: string; // Name message?: string; // Message };` >	[]	Validation errors for this field.
`visible`	boolean	boolean	true	Show or hide the field.
`validators`	array	Array<unknown>	[]	Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
`validateOnBlur`	boolean	boolean	true	Run validators when the field loses focus.
`chrome`	'field' \| 'none' \| false	string	'field'	Render default field chrome, or hide chrome while keeping form state wiring.

Auto-generated from Range input.props and inline _edit hints.

Events

Name	Payload	Description
@update:modelValue	number	The value changed through pointer or keyboard input.
@update:dragging	boolean	Pointer scrubbing started or finished, including cancellation.
@focus	—	—
@blur	—	—

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.