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.

Handle the change event and get the slider value using the event.detail property.

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.

lightning-slider implements the slider blueprint in the Salesforce Lightning Design System (SLDS).

To apply additional styling, use the SLDS utility classes with the class attribute.

This example adds a box theme around the slider using an SLDS class.

Component styling hooks use the --slds-c-* prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See Slider: Styling Hooks Overview for documentation on component-specific hooks for this component.

Use the change event to detect changes to the slider value instead of the blur event. 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.