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.
<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.
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
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
sfdx force:lightning:component:create --type lwc --componentname slider --outputdir force-app\main\default\lwc
Use the below slider.html code
<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
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
<?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