+ Start a Discussion
Marry SteinMarry Stein 

Lightning:Slider to change object value

Hey guys,

i want to check the new possabilitys with lightning. I am familiar with visualforce but not lightning components. I definitely will learn to create some components , but at this moment i am looking for coll "widgets". I like how the slider works and want to create one for the opportunity object to change a number or percent field. 

Does anyone have a solution for that ?  It would be great to see some cool stuff in lightning! 

Greetings Marry 
Raj VakatiRaj Vakati
sample code
 
aura:component controller="ContactSlider">
    <aura:attribute name="val" default="5" type="Integer"/>
    <aura:attribute name="contacts"  type="Contact[]"/>
    
    <lightning:slider step="5" 
                      value="{!v.val}"
                      onchange="{! c.handleRangeChange }" 
                      min="5" max="50" 
                      label="Slide to see the contact"/>
    <table class="slds-table slds-table--bordered "
           role="grid">
        <thead>
            <tr>
                <th class="slds-is-sortable slds-cell-wrap" scope="col">
                    FirstName
                </th>
                <th class="slds-is-sortable slds-cell-wrap" scope="col">
                    LastName
                </th>
                <th class="slds-is-sortable slds-cell-wrap" scope="col">
                    Email
                </th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration var="con" items="{!v.contacts}">
                <tr class="slds-hint-parent">
                    <td role="gridcell" class="slds-cell-wrap" data-label="Role">
                        <div class="">{!con.FirstName}</div>
                    </td>
                    <td role="gridcell" class="slds-cell-wrap" data-label="Role">
                        <div class="" data-label="Role">{!con.LastName}</div>
                    </td>
                    <td role="gridcell" class="slds-cell-wrap" data-label="Role">
                        <div class="" data-label="Role">{!con.Email}</div>
                    </td>
                    
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    
</aura:component>
 
({
    handleRangeChange: function (component, event) {
        var action = component.get("c.getContacts");
        action.setParams({limitfromSlider :event.getParam("value") });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.contacts", response.getReturnValue());
                
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        $A.enqueueAction(action);
        
    }
})
 
public class ContactSlider {
@AuraEnabled
    public static List<Contact> getContacts(integer limitfromSlider){
        return [Select FirstName ,LastName , Email from Contact Limit :limitfromSlider ];
    }
}

 
Marry SteinMarry Stein
Hi Raj, 

thanks for your reply, but its not exactly what i am looking for. I will give it try. Maybe i can figure it out myself. Thanks ! :)