Slider
Extended from PrimeVue Slider
Simple example
This slider allows the user to select a value from 1 to 20 with an allowed step increment of 1.
How many rooms are in your house?
Selected value: 1
Label and tooltip formatting
This slider uses formatting functions to add a dollar sign to the minimum/maximum labels and the tooltip showing the current value.
How much is your average monthly bill?
Selected value: $200
Manual data binding and aria label
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.
What is the minimum credit score necessary to qualify?
Selected value: 650
Disabled
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.
What percentage of your home do you want to heat or cool?
Selected value: 50%
EsSlider props
- Name
ariaLabel
- Type
String
- Default
null
- Description
- Accessible label for slider handle.
- Name
ariaLabelledby
- Type
String
- Default
null
- Description
- Id of an element containing an accessible description for the slider.
- Name
disabled
- Type
Boolean
- Default
false
- Description
- Indicates whether or not the slider should be disabled.
- Name
labelFormatter
- Type
Function
- Default
(val) => val
- Description
- Function that modifies min and max labels.
- Name
max
- Type
Number
- Default
100
- Description
- Required. Maximum value of slider.
- Name
min
- Type
Number
- Default
1
- Description
- Required. Minimum value of slider.
- Name
startingValue
- Type
Number
- Default
1
- Description
- Required. Initial value of slider.
- Name
step
- Type
Number
- Default
1
- Description
- Step factor to increment/decrement the value.
- Name
tooltipFormatter
- Type
Function
- Default
(val) => val
- Description
- Function that modifies tooltip label.
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.