Usage Of lightning-slider

Let us discuss here how to use the 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"

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

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

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.


In this example, we will be showing the contact data based on the slide range change

Create Apex Class

create an apex class as shown below



create a lightning web component using the following sfdx command


Use the below slider.html code



Use the below slider.js code


Use the below slider.js-meta.xml


Push changes and add it to the page layout and you can able to see the like below