how to save record of slider in object in lightning

Question

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.

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>
            </div>
    </div>
    <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>
                <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>
                    </ul>
                </div>
            </div>

        </nav>
        <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>
            </div>
        </div>

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

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

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

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

                                </tr>     
                            </aura:iteration>
                         </tbody>
                </table>
        </div>
    </div>

</aura:component>

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>-->

    </div>
</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');
    console.log(dispdata);

    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");
   slider.on({
        change: function(event){
            var minMax =  slider.val();
            alert('minMax'+minMax);
            var myEvent = $A.get("e.c:sliderEvent");
            alert('myEvent'+myEvent);
            myEvent.setParams({ "min": minMax[0], "max": minMax[1]});
            myEvent.fire();
        }
    });

},
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");

        $slider.noUiSlider({
            start: [1, 100],
            connect: true,
            step: 9,
            range: {
                'min': 0,
                'max': 100
            }
        });

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


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

        $slider.on({
        change: function(event){

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

        }
    });

    }//try
    catch(err){

    }
}

})

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

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);
}

HelperMethod

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

  });
  if (callback) {
      action.setCallback(this, callback);
  }
  $A.enqueueAction(action);
}

Apex Controller

@AuraEnabled

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