lightning:slider

An input range slider for specifying a value between two specified numbers. This component requires API version 41.0 and later.

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.

setCustomValidity(message): Sets a custom error message to be displayed when a condition is met.
  • message (String): The string that describes the error. If message is an empty string, the error message is reset.

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

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.