Slider

Storybook GitHub

<script setup lang="ts">
  // @ts-nocheck -- demo SFC; the library component's dist types are incomplete for these props
import { ref } from "vue";
import MtSlider from "@shopware-ag/meteor-component-library/MtSlider";

const value = ref(50);
</script>

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

Usage

Slider lets users adjust a numeric value within a known range by dragging along a scale. Use it for settings such as limits, thresholds, percentages, or price ranges, where seeing the relative position of a value is more helpful than typing alone.

import { MtSlider } from "@shopware-ag/meteor-component-library";

Examples

Range

<script setup lang="ts">
  // @ts-nocheck -- demo SFC; the library component's dist types are incomplete for these props
import { ref } from "vue";
import MtSlider from "@shopware-ag/meteor-component-library/MtSlider";

const range = ref([20, 80]);
</script>

<template>
  <mt-slider
    v-model="range"
    label="Price range"
    :min="0"
    :max="100"
    :step="5"
    :is-range="true"
    :min-distance="10"
  />
</template>

API reference

Props

Prop	Type	Default
`label` * Defines the label of the slider	`string`
`required` Determines if the field is required.	`false \| true`	`false`
`disabled` Determines if the field is disabled.	`false \| true`	`false`
`name`	`string`	`null`
`help-text` A text that helps the user to understand what this field does.	`string`	`""`
`is-inherited` Toggles the inheritance visualization.	`false \| true`	`false`
`is-inheritance-field` Determines if the field is inheritable.	`false \| true`	`false`
`hint` Optional caption below the field. The `#hint` slot takes precedence when provided.	`string \| null`	`null`
`model-value` The value of the slider. If isRange is true, this should be an array with two values. If isRange is false, this should be a single number.	`number \| number[]`	`0`
`size` The size of the slider.	`"default" \| "small"`	`"default"`
`copyable-tooltip` If set to true the tooltip will change on successful copy.	`false \| true`	`false`
`copyable` Toggles the copy function of the slider.	`false \| true`	`false`
`disable-inheritance-toggle` Determines the active state of the inheritance toggle.	`false \| true`	`false`
`has-focus`	`false \| true`	`false`
`max` Defines the maximum value of the number.	`number`	`100`
`min` Defines the minimum value of the number.	`number`	`0`
`step` Defines the amount of which the number is increased or decreased per step.	`number`	`1`
`is-range` Defines if it is a range slider.	`false \| true`	`false`
`min-distance` Defines the minimum distance between the two sliders. Should be a multiple of the step.	`number`	`0`
`mark-count` Defines the amount of marks on the slider.	`number`	`5`
`on-update:model-value`	`((...args: any[]) => any) \| undefined`
`on-inheritance-remove`	`((...args: any[]) => any) \| undefined`
`on-inheritance-restore`	`((...args: any[]) => any) \| undefined`

Exposed

Name	Type
`future`	`any`
`id`	`string`
`rangeRightValue`	`number`
`rangeLeftValue`	`number`
`activeSlider`	`"left" \| "right" \| null`
`showFieldHint`	`boolean`
`identification`	`string`
`inheritanceState`	`"none" \| "linked" \| "unlinked"`
`labelStyle`	`CSSProperties`
`stringRepresentation`	`string`
`styleStartPosition`	`string`
`styleEndPosition`	`string`
`markStep`	`number`
`toolTipText`	`string`
`toolTipStyle`	`{ display: string; left?: undefined; transform?: undefined; right?: undefined; } \| { left: string; transform: string; display?: undefined; right?: undefined; } \| { right: string; transform: string; display?: undefined; left?: undefined; }`

Best practices

Use a clear label that explains what the scale controls.
Set sensible min, max, and step values for the use case.
Use a range slider when users need to set both a lower and upper bound together.

Don't

Do not use Slider when precise text or number entry is the primary need.
Do not use a very large range with tiny steps if dragging would become frustrating.
Do not rely only on the visual bar to explain the meaning of the selected value.

Behavior

Slider can represent either a single numeric value or a two-value range through isRange.
The component includes linked number inputs, so users can adjust values by dragging or by typing.
markCount, step, and minDistance help shape how the scale behaves and how dense the value guidance feels.

Accessibility

Use a visible label that makes the meaning of the scale clear.
Make sure the chosen range and step size still allow keyboard users to reach useful values efficiently.
Avoid using Slider for critical settings if users need extremely precise control without an alternate input path.

Number Field: when precise numeric entry matters more than direct manipulation.

Edit this pageorReport an issue

Skeleton Bar

A shimmering placeholder block that holds layout while content loads.

Snackbar

Temporary overlay feedback shown near the bottom-right corner of the interface for non-critical, short-lived messages.