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 fallback and treat it as type="text".

Here’s an example of a slider with a step increment of 10.

1<template>
2    <lightning-slider
3        label="Volume"
4        step="10"
5        value={myValue}
6        onchange={handleChange}
7    >
8    </lightning-slider>
9    <div class="slds-m-vertical_medium">
10        <p>
11            The value of the slider is:
12            <span class="slds-text-heading_small">{myValue}</span>
13        </p>
14    </div>
15</template>

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

1import { LightningElement } from "lwc";
2
3export default class SliderExample extends LightningElement {
4  myValue = 20; //initial value
5
6  handleChange(event) {
7    this.myValue = event.detail.value;
8  }
9}

lightning-slider implements the slider blueprint in the Salesforce Lightning Design System (SLDS). The slider adapts to SLDS 1 or SLDS 2 styling based on the org’s theme or the container app that you use.

Client-side input validation is available for this component. Note that a disabled slider is always valid.

To programmatically show error messages on invalid fields, use the reportValidity() method. For custom validity error messages, specify the message using setCustomValidity() and reportValidity().

For more information, see the lightning-input documentation.

Use a combination of variants, sizes, positioning type, and utility classes to customize the slider.

Specify the variant attribute with one of these values.

• standard is the default variant, which includes the text label before the range values and slider
• label-hidden hides the text label from view

Specify the size attribute with one of these values.

• x-small takes up a width of 192px
• small takes up a width of 240px
• medium takes up a width of 320px
• largetakes up a width of 400px

The default slider size takes up the width of the view port.

Specify the type attribute with one of these attributes.

• horizontal is the default position type, which places the slider horizontally across the view port
• vertical places the slider vertically with a height of 192px

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

This example adds padding above the slider using an SLDS class.

1<div class="slds-p-top_large">
2    <lightning-slider label="Volume" step="10" value="20"> </lightning-slider>
3</div>

Component styling hooks provide CSS custom properties that use the --slds-c-* prefix and they change styling for specific elements or properties of a component. Component styling hooks are supported for SLDS 1 only. See the SLDS 1 component blueprints for available component styling hooks.

For more information, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

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.