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.
|
1 2 3 4 5 6 7 8 |
<template> <lightning-slider label="Volume" step="10" value="10" onchange={handleChange}> </lightning-slider> </template> |
Handle the change event and get the slider value using the event.target property.
|
1 2 3 4 5 6 |
import { LightningElement } from 'lwc'; export default class MyDemo extends LightningElement { handleChange(event) { alert(event.target.value); } |
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
|
1 2 3 4 5 6 |
public with sharing class ContactController { @AuraEnabled(cacheable=true) public static List<Contact> getContactList(Integer limitVal) { return [SELECT Id, Name,Email,Phone FROM Contact Limit :limitVal]; } } |
LWC
create a lightning web component using the following sfdx command
|
1 |
sfdx force:lightning:component:create --type lwc --componentname slider --outputdir force-app\main\default\lwc |
Use the below slider.html code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div class="slds-m-vertical_medium"> <h1 class="slds-text-heading_small">Slide to Get the Contacts</h1> <lightning-slider label="Contact Limit" step="5" value={val} onchange={handleChange}></lightning-slider> </div> <lightning-card title="Contacts List"> <ul class="slds-m-around_medium"> <template for:each={contacts.data} for:item="contact"> <li key={contact.Id}> {contact.Name} </li> </template> </ul> </lightning-card> </template> |
Use the below slider.js code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { LightningElement, api, wire, track } from 'lwc'; import getContactList from '@salesforce/apex/ContactController.getContactList'; export default class Slider extends LightningElement { @track val = 5; @track contacts; handleChange(event) { this.val = event.target.value; } @wire(getContactList, { limitVal: '$val' }) contacts; } |
Use the below slider.js-meta.xml
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle> |
Push changes and add it to the page layout and you can able to see the like below
