Home
Usage Of lightning-slider

Usage Of lightning-slider

By February 16, 2019 Lightning Web Components 0 Comments

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

 

 

Related Posts