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 implements 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
4    step="10"
5    value="{!v.myval}"
6    onchange="{! c.handleChange }"
7  />
8</aura:component>

The client-side controller displays the updated value on the slider.

1({
2  handleChange: function (cmp, event) {
3    alert(cmp.get("v.value"));
4  },
5});

Client-side input validation is available for this component. Note that a disabled slider is always valid. To programmatically display error messages on invalid fields, use the reportValidity() method. For custom validity error messages, display the message using setCustomValidity() and reportValidity(). For more information, see the lightning:input documentation.

Use the onchange event handler to detect changes to the slider value instead of the onblur handler. Browsers such as Safari don’t give focus to the slider so the blur event doesn’t fire.

By default, the min and max values are 0 and 100, but you can specify your own values. 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.