lightning:slider

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.

1<aura:component>
2    <aura:attribute name="myval" default="10" type="Integer"/>
3    <lightning:slider step="10" value="{!v.myval}" onchange="{! c.handleRangeChange }"/>
4</aura:component>

The client-side controller handles the value change and updates it with the latest value.

1({
2    handleRangeChange: function (cmp, event) {
3        var detail = cmp.set("v.value", event.getParam("value"));
4    }
5})

Input Validation

To check the validity states of an input, use the checkValidity() method, which returns true if the valid property value on the ValidityState object is true. You can also use setCustomValidity() to provide a custom error message, for example, setCustomValidity(this.messageWhenRangeUnderflow).

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.

Attributes