0

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

  • Hi @ranirube Welcome to SFSE. Can you please post the code which you've tried so far? – SE_User Feb 22 '17 at 5:50
  • Edited question above. – rani rube Feb 22 '17 at 5:56
  • That is the tricky part which i am not able to think how i can save record with slider values. – rani rube Feb 22 '17 at 6:35
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.
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.