Extended from PrimeVue Slider
This slider allows the user to select a value from 1 to 20 with an allowed step increment of 1.
Selected value: 1
This slider uses formatting functions to add a dollar sign to the minimum/maximum labels and the tooltip showing the current value.
Selected value: $200
Though two-day data binding via v-model is recommended, it's also possible to use the startingValue prop and listen to the @change event to hook up the slider to a variable.
This example also shows using ariaLabel instead of ariaLabelledby to describe the purpose of the slider to screen reader users.
Selected value: 650
This slider is disabled. Use this state sparingly and only as a temporary visual indication (for example, during a form submission), as there is a known issue with PrimeVue's slider where it can still receive focus via keyboard when disabled and the value of the slider can be modified via the keyboard.
Selected value: 50%
ariaLabelStringnullariaLabelledbyStringnulldisabledBooleanfalselabelFormatterFunction(val) => valmaxNumber100minNumber1startingValueNumber1stepNumber1tooltipFormatterFunction(val) => val The data and marks props from the ESDS 2.0 version of EsSlider are no longer supported, both for simplicity and due to the underlying PrimeVue component not supporting the functionality.
Previously, the data prop took an array of numbers that specified the available values to select in the slider (e.g. [0, 25, 50, 75, 100, 250, 500, 750, 1000]). The available slider values are now specified via the min, max, and step props. This means that it's no longer possible to have slider values with non-standard gaps between them, as in the array example above where values start out 25 apart, then 150, then 250, etc.
The marks prop generally took an array of two numbers (e.g. [50, 1200]) to denote where the minimum and maximum labels should appear beneath the slider. To enforce UX best practices and because the PrimeVue component doesn't support display of labeled marks at arbitrary points along the slider, minimum and maximum labels will now always display at the start and end of the slider, and the marks prop is no longer available.
A function could also be passed to the marks prop to act as both a label formatter and an indication of which values on the slider should be labeled. The label formatting part of this is now handled by the labelFormatter prop.