A lightning:slider component is a horizontal or vertical slider for specifying a value between two specified numbers. For example, this slider can be used to capture user input about order quantity or when you want to use an input field of type="range". To orient the slider vertically, set type="vertical". Older browsers that don't support the slider fall back and treat it as type="text".
This component inherits styling from slider in the Lightning Design System.
Here's an example of a slider with a step increment of 10.
<aura:component> <aura:attribute name="myval" default="10" type="Integer"/> <lightning:slider step="10" value="{!v.myval}" onchange="{! c.handleRangeChange }"/> </aura:component>
The client-side controller handles the value change and updates it with the latest value.
({ handleRangeChange: function (cmp, event) { var detail = cmp.set("v.value", event.getParam("value")); } })
Usage Considerations
By default, the min and max values are 0 and 100, but you can specify your own values. Additionally, if you specify your own step increment value, you can drag the slider based on the step increment only. If you set the value lower than the min value, then the value is set to the min value. Similarly, setting the value higher than the max value results in the value being set to the max value. For precise numerical values, we recommend using the lightning:input component of type="number" instead.
Methods
This component supports the following methods.
blur(): Removes keyboard focus on the input element.
checkValidity(): Returns the valid property value (Boolean) on the ValidityState object to indicate whether the input field value has any validity errors.
focus(): Sets focus on the input element.
showHelpMessageIfInvalid(): Displays error messages on the slider. The slider value is invalid if it fails at least one constraint validation and returns false when checkValidity() is called.
Attribute Name | Attribute type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
title | String | Displays tooltip text when the mouse moves over the element. | |
value | Integer | The numerical value of the input range. This value defaults to 0. | |
onchange | String | The action triggered when the slider value changes. You must pass any newly selected value back to the slider component to bind the new value to the slider. | |
min | Integer | The min value of the input range. This value defaults to 0. | |
max | Integer | The max value of the input range. This value defaults to 100. | |
step | String | The step increment value of the input range. Example steps include 0.1, 1, or 10. This value defaults to 1. | |
size | String | The size value of the input range. This value default to empty, which is the base. Supports x-small, small, medium, and large. | |
type | String | The type of the input range position. This value defaults to horizontal. | |
label | String | The text label for the input range. Provide your own label to describe the slider. Otherwise, no label is displayed. | |
disabled | Boolean | The disabled value of the input range. This value default to false. | |
variant | String | The variant changes the appearance of the slider. Accepted variants include standard and label-hidden. This value defaults to standard. | |
messageWhenBadInput | String | Error message to be displayed when a bad input is detected. Use with setCustomValidity. | |
messageWhenPatternMismatch | String | Error message to be displayed when a pattern mismatch is detected. Use with setCustomValidity. | |
messageWhenTypeMismatch | String | Error message to be displayed when a type mismatch is detected. Use with setCustomValidity. | |
messageWhenValueMissing | String | Error message to be displayed when the value is missing. Use with setCustomValidity. | |
messageWhenRangeOverflow | String | Error message to be displayed when a range overflow is detected. Use with setCustomValidity. | |
messageWhenRangeUnderflow | String | Error message to be displayed when a range underflow is detected. Use with setCustomValidity. | |
messageWhenStepMismatch | String | Error message to be displayed when a step mismatch is detected. Use with setCustomValidity. | |
messageWhenTooLong | String | Error message to be displayed when the value is too long. Use with setCustomValidity. | |
onblur | Action | The action triggered when the slider releases focus. | |
onfocus | Action | The action triggered when the slider receives focus. |