function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mathew Thomas 29Mathew Thomas 29 

is there a way to change the output value of a slider while keeping the range between 0-100. For example like apply a formula on the output

Best Answer chosen by Mathew Thomas 29
Mathew Thomas 29Mathew Thomas 29
For those in need for the code to use the slider value and implement a formula on it and display it below the slider. Here I have implemented changing the 
User-added imageIt looks like this
The code is as follows
1)HTML code:
<template>
   
    <div class="slds-m-vertical_medium">
        <h1 class="slds-text-heading_small">Custom Slider</h1>//Header for slider
        <p class="slds-text-body_regular">A slider for specifying Profit Amount</p>
    </div>
    
    <lightning-slider label="Volume" value={val} onchange={handleChange} sixe='medium'></lightning-slider>
    <p> {calculatedAmount}</p>
</template>

2) JS Code: Specifically extracted amount from opportunity page and implemented formula on that
//Do see the console as well to see if you encounter any errors
import { LightningElement,track,api,wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import OPPORTUNITY_OBJECT from '@salesforce/schema/Opportunity';//Opportunity object: you can put any object
import AMOUNT_FIELD from '@salesforce/schema/Opportunity.Amount';//Field of Opportunity object:you can put any object
export default class LightningExampleSliderBasic extends LightningElement {
    val = 50;//initial value of slider
    @track calculatedAmount=0;
    @api recordId='0064x000005oQR4AAM';
    
    @wire(getRecord, { recordId: '$recordId', fields: [AMOUNT_FIELD] })
    record;
   
    handleChange(event){         //handles the change of value of slider this field is part of slider fields in HTML
        console.log(event.target.value);
        let slidervalue = event.target.value;
        console.log(Number(this.calculatedAmount));
        console.log(parseInt(slidervalue));
        console.log(getFieldValue(this.record.data, AMOUNT_FIELD));
        let opportunityAmount = getFieldValue(this.record.data, AMOUNT_FIELD);
        

const formatter = new Intl.NumberFormat('en-US', {//Formatting function from integer to currency
            style: 'currency',
            currency: 'USD',
            minimumFractionDigits:2
          })
        
        
        console.log(this.calculatedAmount+parseInt(slidervalue));
        this.calculatedAmount =formatter.format (opportunityAmount/ (1-(slidervalue/100)));//the value in displayed below slider should be same on the html page Check above html code as well
      
          
         
          
    }
}

3)  JS-meta.xml:// Standard
<?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__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

 

All Answers

ANUTEJANUTEJ (Salesforce Developers) 
Hi Mathew,

Can you elaborate on the scenario that you have mentioned? so as to check further and respond back.

Thanks.  
Mathew Thomas 29Mathew Thomas 29
@anutej So basically
User-added image
I want to create something like this on which a formula is applied to the value
ANUTEJANUTEJ (Salesforce Developers) 
>> https://developer.salesforce.com/docs/component-library/bundle/lightning:slider/example

I see there is already a component in the lightning framework.

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
Mathew Thomas 29Mathew Thomas 29
@anutej I am new at developing could you tell me which component? And I have a need to take amount from opportunity and apply it to the formula amount-(1-  SliderValue/100).(In this case the slider value is between 1-100) So it's a value from a previous field !User-added image
ANUTEJANUTEJ (Salesforce Developers) 
So you won't be able to build this functionality with existing data types you need to build a lightning component that can make use of this tag.

If you think it is difficult to implement in the lightning component you can also implement using the flows, if you are choosing this then you can check the below documentation : https://help.salesforce.com/articleView?id=sf.flow_ref_elements_screencmp_slider.htm&type=5
Mathew Thomas 29Mathew Thomas 29
@anutej could you help me out with bulding the component!
 
Mathew Thomas 29Mathew Thomas 29
For those in need for the code to use the slider value and implement a formula on it and display it below the slider. Here I have implemented changing the 
User-added imageIt looks like this
The code is as follows
1)HTML code:
<template>
   
    <div class="slds-m-vertical_medium">
        <h1 class="slds-text-heading_small">Custom Slider</h1>//Header for slider
        <p class="slds-text-body_regular">A slider for specifying Profit Amount</p>
    </div>
    
    <lightning-slider label="Volume" value={val} onchange={handleChange} sixe='medium'></lightning-slider>
    <p> {calculatedAmount}</p>
</template>

2) JS Code: Specifically extracted amount from opportunity page and implemented formula on that
//Do see the console as well to see if you encounter any errors
import { LightningElement,track,api,wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import OPPORTUNITY_OBJECT from '@salesforce/schema/Opportunity';//Opportunity object: you can put any object
import AMOUNT_FIELD from '@salesforce/schema/Opportunity.Amount';//Field of Opportunity object:you can put any object
export default class LightningExampleSliderBasic extends LightningElement {
    val = 50;//initial value of slider
    @track calculatedAmount=0;
    @api recordId='0064x000005oQR4AAM';
    
    @wire(getRecord, { recordId: '$recordId', fields: [AMOUNT_FIELD] })
    record;
   
    handleChange(event){         //handles the change of value of slider this field is part of slider fields in HTML
        console.log(event.target.value);
        let slidervalue = event.target.value;
        console.log(Number(this.calculatedAmount));
        console.log(parseInt(slidervalue));
        console.log(getFieldValue(this.record.data, AMOUNT_FIELD));
        let opportunityAmount = getFieldValue(this.record.data, AMOUNT_FIELD);
        

const formatter = new Intl.NumberFormat('en-US', {//Formatting function from integer to currency
            style: 'currency',
            currency: 'USD',
            minimumFractionDigits:2
          })
        
        
        console.log(this.calculatedAmount+parseInt(slidervalue));
        this.calculatedAmount =formatter.format (opportunityAmount/ (1-(slidervalue/100)));//the value in displayed below slider should be same on the html page Check above html code as well
      
          
         
          
    }
}

3)  JS-meta.xml:// Standard
<?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__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

 
This was selected as the best answer