Skip to main content
The MtSlider component allows users to select a numeric value or range using an interactive slider.

​
Import

import { MtSlider } from '@meteroid/component-library';

​
Props

​
modelValue
number | number[]
required
The value of the slider. If isRange is true, this should be an array with two values.
​
label
string
required
Defines the label of the slider.
​
min
number
default:"0"
Defines the minimum value of the number.
​
max
number
default:"100"
Defines the maximum value of the number.
​
step
number
default:"1"
Defines the amount by which the number is increased or decreased per step.
​
isRange
boolean
default:"false"
Defines if it is a range slider.
​
minDistance
number
default:"0"
Defines the minimum distance between the two sliders. Should be a multiple of the step.
​
markCount
number
default:"5"
Defines the amount of marks on the slider.
​
disabled
boolean
default:"false"
Disables the slider.
​
required
boolean
default:"false"
Marks the field as required.
​
helpText
string
Help text with additional information.
​
isInherited
boolean
default:"false"
Toggles inheritance visualization.
​
isInheritanceField
boolean
default:"false"
Determines if the field is inheritable.

​
Events

​
update:modelValue
(value: number | number[]) => void
Emitted when the slider value changes.
​
inheritance-restore
(event: unknown) => void
Emitted when inheritance is restored.
​
inheritance-remove
(event: unknown) => void
Emitted when inheritance is removed.

​
Slots

​
hint
slot
Additional hint content.

​
Usage

​
Basic Slider

<script setup>
import { ref } from 'vue';
const volume = ref(50);
</script>

<template>
  <mt-slider 
    v-model="volume"
    label="Volume"
    :min="0"
    :max="100"
  />
</template>

​
Range Slider

<script setup>
import { ref } from 'vue';
const priceRange = ref([20, 80]);
</script>

<template>
  <mt-slider 
    v-model="priceRange"
    label="Price range"
    is-range
    :min="0"
    :max="100"
  />
</template>

​
Custom Step Size

<template>
  <mt-slider 
    v-model="value"
    label="Value"
    :min="0"
    :max="100"
    :step="5"
  />
</template>

​
With Minimum Distance

<template>
  <mt-slider 
    v-model="range"
    label="Temperature range"
    is-range
    :min="-20"
    :max="40"
    :min-distance="5"
  />
</template>

​
Custom Mark Count

<template>
  <mt-slider 
    v-model="value"
    label="Rating"
    :min="0"
    :max="10"
    :mark-count="11"
  />
</template>

​
Percentage Slider

<script setup>
import { ref } from 'vue';
const percentage = ref(75);
</script>

<template>
  <mt-slider 
    v-model="percentage"
    label="Progress"
    :min="0"
    :max="100"
  >
    <template #hint>
      {{ percentage }}%
    </template>
  </mt-slider>
</template>

​
Accessibility

  • Uses native range input for accessibility
  • Keyboard navigation (arrow keys to adjust value)
  • Tooltip shows current value on hover
  • Visual marks indicate scale
  • Number fields allow direct input
  • ARIA labels for screen readers
  • Disabled state prevents interaction

Build docs developers (and LLMs) love

Get started for freeTalk to us