Skip to content

BaseRangeSlider

Input range slider with additional buttons to increase/decrease the current value

Props

Prop nameDescriptionTypeValuesDefault
modelValuespecify the current range valuenumber-0
labellabel for the input range fieldstring-'Range slider'
minspecify the min range valuenumber-0
maxspecify the max range valuenumber-100
stepspecify the step size to increase/decrease the valuenumber-10
disabledset true if input field should be disabledboolean-false
assistiveTextthis prop gives the option to add assistive text for screen readers
properties:
increase: text for the increase button
decrease: text for the decrease button
object-{
increase: 'increase value',
decrease: 'decrease value'
}

Events

Event namePropertiesDescription
update:model-value

Demo

Input range slider with additional buttons to increase/decrease the current value.