I have created one range slider component got from this site only. I want to save the records in object when click on Submit. Below is the screenshot of the screen. enter image description here

Here each record have its own slider. If user selects some min and max value using this slider then on click of submit that selected values should be saved in object.

Please suggest me way to do this.

Component code- scripts="/resource/realtyapp/js/jquery.js,/resource/realtyapp/js/jquery.nouislider.all.min.js"/>

    <aura:handler name="init" value="{!this}" action="{!c.myAction}"/>

    <link href="https://code.jquery.com/jquery-3.1.1.js"/>
    <link href="http://www.jqueryscript.net/demo/Simple-Nice-jQuery-Value-Range-Slider-Plugin-Fresh-Slider/freshslider.1.0.js"/>      
    <div class="slds-spinner_container slds-hide" aura:id ="load">
            <div role="status" class="slds-spinner slds-spinner--large">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
        <nav class="navbar navbar-default" style="background-color:#019c50;font-family:verdana;">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand"><img style="width: 200px;margin-top: -13px;" 
                                             src="/resource/CastrolLogo" alt="Castrol Logo"></img></a>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a style="color:white;" href="#">HOME</a></li>
                        <li><a style="color:white;" href="#" onclick="{!c.toggle}">SERVICES</a></li>

        <div class="col-md-3 col-sm-6 hero-feature slds-hide" style="margin-left: -13px;font-family:verdana;" align="center" id="technicalServices">
            <div class="thumbnail">
                <img src="/resource/TechServices" alt="" style="margin-top:10px;"/>
                    <div class="caption" style="margin-top:20px; margin-bottom:20px;">
                        <h4 style="font-family:verdana; color:black;"><a href="#" onclick="{!c.getTechServices}">Technical Services<br/></a></h4>
                        <p style="font-size: 12px;color: black;">{!v.ServDisc}</p>

        <div class="col-md-9 slds-hide" id="technics">
               <ui:button label="Submit" press="{!c.submit}"/>
                <table class="table table-striped" style="border:1px solid grey;font-family:verdana;font-size:13px;">
                            <th style="padding: 10px;background-color: #019c50;color: white;"><b>Our Technical Services</b></th>    
                            <th style="padding: 10px;background-color: #019c50;"></th>  

                            <aura:iteration items="{!v.service}" var="obj" indexVar="i">
                                    <td style="border-bottom:1px solid grey;">
                                   <!-- <td style="border-bottom:1px solid grey;" >

                                        <input id="slider" type="range"  min="0" max="100"  step="20" onchange="{!c.sliderOnChange}"></input>
                                            <span id="rangeValue" style="margin-left:70px;">0</span>
                                            <span style="margin-left: 50px;">10</span>

                                    </td>   -->
                                    <td style="border-bottom:1px solid grey;">
                                        <!--<c:sliderComponent />-->
                                        <c:sliderComponent num="{!i}"/>



Tn this component i have another component which is slider component.

 <ltng:require afterScriptsLoaded="{!c.sliderInit}"
<aura:attribute name="num" type="String" />
<aura:attribute name="minMax" type="String" />

--> </div>-->


HomePage component controller- ({ myAction : function(component, event, helper) { }, toggle : function(component, event, helper) {

    var currentDiv = document.getElementById('technicalServices');
    var CurrentClassName = currentDiv.className;
    currentDiv.className = CurrentClassName.replace("slds-hide", "slds-show");

    helper.getDiscription(component, event);      

getTechServices : function (component, event, helper){
    var dispdata = document.getElementById('technics');

    var CurrentClass = dispdata.className;
    dispdata.className = CurrentClass.replace("slds-hide", "slds-show");
    helper.getTechServices(component, event);
sliderOnChange : function (component, event, helper){
    alert('on change slider');
    var slider = $("#slider");
        change: function(event){
            var minMax =  slider.val();
            var myEvent = $A.get("e.c:sliderEvent");
            myEvent.setParams({ "min": minMax[0], "max": minMax[1]});

submit: function (component, event, helper){
   alert('in submit');
    //var num = "#slider"+component.get("v.num");
    //var $slider = $(num);
    //alert($slider) ;


Slider component controller- ({ sliderInit : function(component, event, helper) { try{ var num = "#slider"+component.get("v.num"); var $slider = $(num); //var $slider = $("#slider");

            start: [1, 100],
            connect: true,
            step: 9,
            range: {
                'min': 0,
                'max': 100

        $slider.Link('lower').to('-inline-<div class="tooltip"></div>', function ( value ) {
            '<span>' + (value) + '</span>'

    $slider.Link('upper').to('-inline-<div class="tooltip"></div>', function ( value ) {
            '<span >' + (value/1) + '</span>'

        change: function(event){

           // var action = component.get("v.minMax");
          //var minMaxVal=$(action);
           // alert('action--'+action);





I am not understanding how to fetch and save the range values in object.

  • Hi @ranirube Welcome to SFSE. Can you please post the code which you've tried so far?
    – SE_User
    Commented Feb 22, 2017 at 5:50
  • Edited question above.
    – rani rube
    Commented Feb 22, 2017 at 5:56
  • Saving Records using a Lightning Component
    – SE_User
    Commented Feb 22, 2017 at 6:33
  • That is the tricky part which i am not able to think how i can save record with slider values.
    – rani rube
    Commented Feb 22, 2017 at 6:35

1 Answer 1


On your submit button click, call the java script controller action.In controller action call apex method and pass your selected range values as parameters. See example

controller Method

createNewRec : function(component, event, helper) {
    // Assign range values to a variable.
    var newRecToInsert = component.get("v.newRec");
    helper.createNewRecord(component, newRecToInsert ,rangeVal);


createNewRecord: function(component, newRecToInsert, rangeVal) {
  var action = component.get("c.saveRecord");
      "rangeValues": rangeVal,
      "record": newRecToInsert 

  if (callback) {
      action.setCallback(this, callback);

Apex Controller


    public static YourRecordType saveRecord(type rangeValues,YourRecordType record) {
        //assign the range values to record field and insert the record.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .